Question

我试图用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]);
}

这总是输出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

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

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

您的代码经过重构以避免出现这些问题：

＆＃13;

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
}

＆＃13;

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

＆＃13;

Answer 2

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

Javascript - 画布上的getImageData总是返回alpha 255

2 个答案: