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

Javascript - getImageData on canvas always returns alpha 255

本文关键字：返回 alpha getImageData Javascript      更新时间：2023-09-26

我正在尝试使用 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; }

相关文章：