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

我试图用javascript和canvas读取图像中的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]);
}

var img=newimage（）；
img.src=“url/to/an/image/with/transparency”；
var canvas=document.createElement（'canvas'）；
var context=canvas.getContext（'2d'）；
drawImage（img，0,0）；
var data=context.getImageData（0,0，img.width，img.height）；
对于（var i=0；i，您的代码可能存在以下几个问题：


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

以下是为避免这些问题而进行的代码重构：


var img=newimage（）；
img.crossOrigin='anonymous'；
img.onload=启动；
img.src=”https://dl.dropboxusercontent.com/u/139992952/multple/icon_64x64.png";
函数start（）{
var canvas=document.createElement（'canvas'）；
document.body.appendChild（画布）；
canvas.width=img.width；
canvas.height=img.height；
var context=canvas.getContext（'2d'）；
drawImage（img，0,0）；
var data=context.getImageData（0,0，img.width，img.height）；
var alphas=''；//演示目的
对于（var i=0；i我也有同样的问题，我发现我需要设置
context.globalCompositeOperation=“copy”
，以确保alpha覆盖目标数据。
while
循环有什么问题，你已经有了一个处理程序来处理何时加载映像了？
while（！ready）{
=>无限循环？@adeneo谢谢，我忘了我从代码中删除了这一部分。谢谢你的帮助。我根据你的示例更改了代码，只是没有将画布附加到我的文档正文中。我仍然得到255个alpha。请发布你的图像。我只是将所有rgba值打印到我的控制台上，它们都是错误的，红色、绿色和alpha are始终为255，蓝色始终为153。这是我使用的图像：作为测试（在generateCollisionGrid内部），您的img在generateCollisionGrid内部有效吗，将img附加到页面并复制到桌面。桌面图像看起来是不透明的吗？@kaido。当然，但我指出了代码中的几个弱点……不仅仅是最接近的弱点。：-）