我正在尝试使用 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。我已经找到了这个,但它并没有真正帮助我:新手不断失去画布中的阿尔法值
无论我尝试什么,它都行不通。
编辑:这是我的完整代码:http://pastebin.com/3giQCWvP
错误发生在 generateCollisionGrid() 函数中。我发现红色和绿色也总是255。
这是我用于测试的图像:https://addons.opera.com/media/extensions/03/1303/1.4-rev1/icons/icon_64x64.png
我遇到了同样的问题,发现我需要设置context.globalCompositeOperation = "copy"
以确保 alpha 覆盖目标数据。
您的代码可能存在几个问题:
- 图像可能并不真正透明。
- 当您尝试绘制图像时,图像可能未完全加载。使用
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; }