如何确定图像是否在 Javascript 上使用透明度？答案

【问题标题】：How to determine if image is using transparency on Javascript?如何确定图像是否在 Javascript 上使用透明度？
【发布时间】：2017-12-20 16:39:14
【问题描述】：

我希望能够检测徽标类型图像是否具有透明背景，假设两个相似的图像是 .png 文件，但一个具有白色背景，另一个具有透明背景，如何我能确定一个透明的吗？

我尝试过使用 colorthief，但它没有考虑透明度，所以我想自己在 canvas 上做。第一个解决方案是将png文件转换为jpg，如果转换后jpg的背景颜色看起来是黑色的，那么它是一个透明的标志，但这对于黑色背景的用户来说可能是个问题和白色的标志。还有比这更好的解决方案吗？

http://jsfiddle.net/9s5qf5cu/

从 png 到 jpg：

var imageLoader = document.getElementById('imageLoader');
imageLoader.addEventListener('change', handleImage, false);

var canvas = document.getElementById('imageCanvas');
var ctx = canvas.getContext('2d');


function handleImage(e){
    var reader = new FileReader();
    reader.onload = function(event){
        var img = new Image();
        img.onload = function(){
            canvas.width = 100;
            canvas.height = 100;
            ctx.drawImage(img,0,0, 100, 100);
            document.getElementById("image").src = canvas.toDataURL("image/jpeg");
        }
        img.src = event.target.result;

    }
    reader.readAsDataURL(e.target.files[0]);     
}

【问题讨论】：

“第一个解决方案是将 png 文件转换为 jpg”
可能有很多方法可以做到这一点，一种是按照您的建议进行操作，也许通过检查所有像素并确定一定数量的像素是否与背景颜色相同。使用另一个图像作为背景将使得大量像素不太可能相同等。但是，正确的做法是将图像发送到服务器，并使用 ImageMagick 检查 alpha 通道。跨度>
@lilezek 是的，我明白这一点，但我是说在我的 jsfiddle 上它是黑色的，我可以用它来检测背景是否透明
“但是在将 png 文件转换为 jpg 时，如果图像是透明的，则会得到黑色背景” - 这将如何帮助您确定您的 PNG 是否带有透明背景，还是一开始是黑色的？我认为将 PNG 复制到画布上并使用 getImageData 并检查每个像素的 alpha 级别将是一种可行的方法（假设将包含此类透明部分的图像复制到空画布上会保持这些值不变。）
我猜这有点问题，任何插入到画布中的不是来自同一来源的图像都会被污染，因此 JSFiddle 上使用的任何图像都必须来自该来源跨度>

标签： javascript image html5-canvas transparency

【解决方案1】：

通过传递你的上下文和你的画布来使用这个函数。然后它将遍历 alpha 通道，直到找到一个不完全不透明的条目。

function hasAlpha (context, canvas) {
    var data = context.getImageData(0, 0, canvas.width, canvas.height).data,
        hasAlphaPixels = false;
    for (var i = 3, n = data.length; i < n; i+=4) {
        if (data[i] < 255) {
            hasAlphaPixels = true;
            break;
        }
   }
   return hasAlphaPixels;
}

注意：如果您的画布被污染，这将不起作用。

【讨论】：

谢谢，我在让它工作时遇到了一些问题：jsfiddle.net/9s5qf5cu/2 我应该在上下文中输入什么？
在这个函数中应该是ctx。
我尝试的每张图片似乎都是透明的，即使不是
我明白了，我从 i 0 开始，而它应该从 3 开始。试试这个版本：jsfiddle.net/Zomry/g0mt5obw