getImageData 丢失透明度 - HTML5 2d 上下文

Question

我注意到getImageData 有一个奇怪的问题；获取图像数据时，图像的透明度似乎被忽略了。

由于任何图像都需要在获得图像数据之前绘制到canvas，我认为这是canvas 不透明的问题。但我错了，因为在drawImage 中使用canvas 作为参数可以保持透明度。

这是我加载图像的方式；

var load_image = function(name, url, holder, callback) {
    var img = new Image();
    img.src = url;

    img.addEventListener('load', function(e) {
        var canvas = make_canvas(e.target.width, e.target.height);
        var ctx = canvas.getContext('2d');

        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.drawImage(e.target, 0, 0);

        holder[name] = {canvas: canvas, ctx: ctx};

        delete e.target;

        callback.call();
    }, false);
};

callback 只是简单的绘图函数，它调用draw_image 来绘制图像。

普通版；

var draw_image = function(ctx, img, sx, sy, w, h, dx, dy) {
    ctx.drawImage(img.canvas, sx, sy, w, h, dx, dy, w, h);
};

它只是将画布作为drawImage 的参数，结果与预期的一样，并保持了透明度。 Example。

图像数据版本；

var draw_image = function(ctx, img, sx, sy, w, h, dx, dy) {
    var imagedata = img.ctx.getImageData(sx, sy, w, h);
    ctx.putImageData(imagedata, dx, dy);
};

这个从与普通版使用的相同的画布中获取所需矩形的图像数据，并将图像数据放在我要绘制的画布上。我认为应该保持透明度，但事实并非如此。 Example。 （这是一个 Dropbox 链接，因为 origin-clean 标志。）

我认为应该使用getImageData 保持透明度是错误的吗？还是我只是以错误的方式使用它？

无论哪种方式，我们都非常感谢您的帮助。

Answer 1

我相信您的问题是 putImageData 没有使用 composite operation 来混合源图像数据和目标图像数据。相反，它直接将红色、绿色、蓝色、 和 alpha 通道写入画布。对于完全透明的像素，这意味着它们可能会以您期望的颜色显示，也可能不会。

相反，您可以创建一个中间画布元素，绘制到该元素，然后使用 drawImage() 将其渲染到目标画布，并应用适当的 globalCompositeOperation。 Mask for putImageData with HTML5 canvas? 更详细地讨论了这个问题。

更新：您可以通过执行ctx.getImageData(230,50,1,1).data 来验证您写入“损坏”示例的数据是否确实包含透明数据。结果是 [0,0,0,0] - 即完全透明的像素。