Question

我希望能够检测到徽标类型图像是否具有透明背景，让我们想象两个相似的图像是.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

通过传递上下文和画布来使用此功能。然后它将遍历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;
}

注意：如果画布受到污染，这将无效。

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

1 个答案: