javascript - 如何在裁剪 HTML5 Canvas/JavaScript 后从图像中删除透明空白？

Question

所以我有一个函数可以动态生成世界地图的裁剪部分。 map 上绘制了各种点，按经度和纬度绘制，具体取决于从脚本其他地方传递到函数的数据。 (不要担心这些值是如何计算的，只需接受它们是在我将 [number] 放在我的代码中的地方计算的)。我已经弄清楚如何动态裁剪我的 map ，但我注意到当图像附加到页面上的 div 时，裁剪后图像右侧有很多透明空白。如何删除此空格？

请注意，每种裁剪的尺寸都不同。在包含的 div 上设置 overflow:hidden 属性并将包含的 div 限制为精确的像素宽度不会实现我想要实现的目标。

谢谢你 -- 盖维恩

createZoomedMapImage: function(imageURL){
  var imageObj = new Image();

  imageObj.onload = _.bind(function(){
    var canvas = document.createElement("canvas"),
        context = canvas.getContext("2d"),
        $canvas = $(canvas),
        w = imageObj.width,
        h = imageObj.height;
  canvas.width = w;
  canvas.height = h;

  var startingX = [number]
  var starting Y = [number]
  var deltaWidth = [number]
  deltaHeight = [number]
  context.drawImage(imageObj, startingX, startingY, deltaWidth, deltaHeight, 0, 0, (deltaWidth*2), (deltaHeight*2));
  var zoomedImage = canvas.toDataURL('image/png');

  }, this);
  imageObj.src = imageURL;
}

jsfiddle.net/Gaweyne/r0t3hoo6

图片标签看起来像结果中显示的内容。我有一张 300 x 600 像素的图片。但实际图形只占用 300 x 300 像素。我不希望图形占据图像的整个宽度。我希望图像为 300 x 300 像素。我不想使用 CSS 明确设置它，因为裁剪后的 map 大小会因数据而异。

Answer 1

尝试使用:

canvas.width = deltaWidth;
canvas.height = deltaHeight;
context.drawImage(imageObj, startingX, startingY, deltaWidth, deltaHeight, 0, 0, (deltaWidth*2), (deltaHeight*2));
var zoomedImage = canvas.toDataURL('image/png');