关于图像可用性的一些检测

腾讯大讲堂

发布于 2021-02-25 12:40:14

8110

发布于 2021-02-25 12:40:14

文章被收录于专栏：腾讯大讲堂的专栏

作者：yikfunwu 腾讯PCG开发工程师

|导语泰山智能设计平台已经为业务每天生成素材1w+。在批量制图的过程中，我们发现有时服务器会制作生成一些『异常』的图片…怎么能在图片投放前检测出这种图像，提高图片的可用度呢？

我们从图像数据，图像渲染和图像内容本身，从里到外三个角度来考虑图像可用性的问题。

图像数据

这里说的图像数据也就是图片的文件数据。

如果图片在渲染写入过程中意外中断了，会直接导致生成的图片不完整，丢失后面的内容。如下图所示：

这种情况因为其文件数据结构不完整，所以可以用正常图片格式的文件头尾来判断图片信息是否完整。

以常用的JPEG图片格式为例，从维基百科的JPEG文件格式中可以看到，正常的JPEG文件头会以字节 0xFF, 0xD8 开头，以 0xFF, 0xD9 结尾。因为大多数情况是图片尾部的信息不完整，所以直接用文件尾的信息来判断即可。

let response = await axios.get(imageUrl, { responseType: 'arraybuffer' });

let endByte = response.data.slice(response.data.length - 2);

let correctEnd = new Buffer([0xff, 0xd9]);

if (!correctEnd.equals(endByte)) {

console.log("image data error")

}

通过以上方式可以首先排查出因为图片文件本身的数据问题导致的图像不可用情况。

图像渲染

图片渲染错误一般是因为网络波动问题，服务器拉取对应的元素图片失败，导致渲染出来的图片里有黑屏的情况。如下图所示：

这种情况可以通过图片中黑色像素值的占比来判断图片是否可用。

但黑色像素不能简单地用纯黑的色值（r=0，g=0，b=0）来判断，因为图片里的一些修饰元素的效果（投影，渐变等）会使原本黑色的区域发灰。上右图底部文字的背景实际上就不是纯黑的。所以我们需要把判断颜色的阈值放大些，如果r，g，b值都小于30，则判定为『黑色像素』。『黑色像素』超过图片总像素90%，则判断为错误图片不可用。

const Canvas = require("canvas")

let canvas = new Canvas(imgWidth, imgHeight)

let ctx = canvas.getContext('2d');

let Image = Canvas.Image;

let img = new Image;

img.src = buffer;

ctx.drawImage(img, 0, 0, imgWidth, imgHeight);

let imageData = ctx.getImageData(0, 0, imgWidth, imgHeight);

let pixelNum = imageData.data.length / 4;

let blackNum = 0;

for (let i = 0; i < imageData.data.length; i += 4) {

let r = imageData.data[i];