Question

在普通的javascript中，我需要检查图像的大部分是否透明。

例如，如果超过50％的图像可见度低于10％，则认为它是透明的。

我需要一种方法来过滤掉所有这些图像，因为它们通常是完全空白的，或者只是在它们上面有一个小标识。

Answer 1

function opacityRatio(image) {
    const canvas = document.createElement("canvas");
    const context = canvas.getContext("2d");
    canvas.width = image.width;
    canvas.height = image.height;
    context.drawImage(image, 0, 0);
    const data = context.getImageData(0, 0, canvas.width, canvas.height).data;
    let opacity = 0;
    for (let i = 0; i < data.length; i += 4) {
        opacity += data[i + 3];
    }
    return (opacity / 255) / (data.length / 4);
}

此函数将返回0到1之间的数字，0表示完全透明的图像，1表示完全不透明的图像。请注意，它使用的是getImageData，并且要工作，图像需要托管在同一个源/域中，或者具有跨域权限。

使用Javascript检查图像的透明程度？

1 个答案: