用 Javascript 检查有多少图像是透明的？答案

【问题标题】：Check how much of an image is transparent with Javascript?用 Javascript 检查有多少图像是透明的？
【发布时间】：2017-10-22 06:01:10
【问题描述】：

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

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

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

【问题讨论】：

很高兴知道您想要/需要什么，但到目前为止您尝试了什么以及您对哪个部分有问题？你做了什么研究...没有源代码=没有调试/修复，这不是免费的写作服务。
您是否在搜索“检查图像透明度 javascripit”后检查了这个stackoverflow.com/questions/41287823/check-image-transparency 第一个结果
Check image transparency的可能重复
这与提到的可能重复有点不同，因为在这种情况下会有一个阈值来考虑图像透明。

标签： javascript

【解决方案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，并且要工作，图像需要托管在相同的源/域中或具有跨域权限。

【讨论】：

完美运行！感谢您的帮助