Javascript - 画布上的 getImageData 始终返回 alpha 255

Question

我正在尝试使用 javascript 和画布读取图像中的 alpha 值，但 getImageData 返回的 ImageData 的 alpha 部分始终为 255，即使处理后的图像仅包含透明像素。这就是我所做的：

var img = new Image();
img.src = "url/to/an/image/with/transparency";
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
context.drawImage(img, 0, 0);
var data = context.getImageData(0, 0, img.width, img.height).data;
for(var i = 0; i<data.length; i+=4){
    console.log(data[i+3]);
}

这总是输出 255。我已经找到了，但它并没有真正帮助我： newbie keeps losing alpha values in canvas

不管我怎么尝试，它都行不通。

编辑：这是我的完整代码：http://pastebin.com/3giQCWvP

错误发生在 generateCollisionGrid() 函数内部。我发现红色和绿色也总是 255。

这是我用来测试的图片：https://addons.opera.com/media/extensions/03/1303/1.4-rev1/icons/icon_64x64.png

Answer 1

我遇到了同样的问题，发现我需要设置 context.globalCompositeOperation = "copy" 以确保 alpha 覆盖目标数据。

Answer 2

您的代码可能存在几个问题：

• 图像可能不是真正透明的。
• 当您尝试绘制图像时，图像可能未完全加载。使用 img.onload 等待 img 完全加载后再尝试绘制。
• 当您createElement('canvas') 时，画布的默认大小为 300x150，因此您的图像可能大于或小于默认画布大小。使用canvas.width=img.width & canvas.height=img.height 将画布大小设置为img大小。
• 如果图像 URL 来自与网页不同的域，则会引发安全错误。此错误情况将阻止 .getImageData 返回数据。

以下是您的代码重构以避免这些问题：

var img=new Image();
img.crossOrigin='anonymous';
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/icon_64x64.png";
function start(){

    var canvas = document.createElement('canvas');
    document.body.appendChild(canvas);
    canvas.width=img.width;
    canvas.height=img.height;
    var context = canvas.getContext('2d');
    context.drawImage(img, 0, 0);
    var data = context.getImageData(0, 0, img.width, img.height).data;
    var alphas=''; // demo purposes
    for(var i = 0; i<data.length; i+=4){
        console.log(data[i+3]);
        if(i<200){alphas+=data[i+3]+',';} // demo purposes
    }

    alert(alphas); // demo purposes
}

body{ background-color: ivory; }
canvas{border:1px solid red; margin:0 auto; }