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

Question

我希望能够检测 Logo 类型的图像是否具有透明背景，让我们假设两个相似的图像是 .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]);     
}

Answer 1

通过传递上下文和 Canvas 来使用此函数。然后它将遍历 alpha channel ，直到它找到一个不是完全不透明的条目。

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;
}

注意:如果您的 Canvas 被污染，这将不起作用。