关于图像可用性的一些检测_科技新闻

2021-02-24 网络
浏览
[科技新闻]关于图像可用性的一些检测_科技新闻

原题目:关于图像可用性的一些检测

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

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

我们从图像数据,图像渲染和图像内容自己,从里到外三个角度来思量图像可用性的问题。

01

图像数据

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

若是图片在渲染写入过程中意外中断了,会直接导致天生的图片不完整,丢失后面的内容。如下图所示:

这种情形由于其文件数据结构不完整,以是可以用正常图片花样的文件头尾来判断图片信息是否完整。

以常用的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")

}

通过以上方式可以首先排查出由于图片文件自己的数据问题导致的图像不可用情形。

02

图像渲染

图片渲染错误一样平常是由于网络颠簸问题,服务器拉取对应的元素图片失败,导致渲染出来的图片里有黑屏的情形。如下图所示:

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

但玄色像素不能简朴地用纯黑的色值(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];

let g = imageData.data[i 1];

let b = imageData.data[i 2];

if (r < 30 && g < 30 && b < 30) {

blackNum

}

}

if (blackNum / pixelNum * 100 >= 90){

console.log("image render error")

}

通过上面的方式就可以排查出由于网络问题导致元素内容拉取失败渲染出黑屏的问题了。

03

图像内容

图像内容涉及的局限有许多,这里我们以最基础的一个维度为例,来判断图片是否可用:图片的重点区域是否被遮挡,有没有正常显示。如下图所示:

04

总结

以上,我们分别从图像数据,图像渲染,图像内容,从内到外三个角度来检测和提升图像的可用度。

基于云原生基础设施的后台架构设计思索

多地瞄准综合性国家科学中心第五城 谁更有胜算

与南方地区相比,山东在科教资源和科技创新方面虽不占优势,但其亦在争取一批大科学装置落地,全力争创济青综合性国家科学中心。从上海、北京、合肥这三座城市的综合性国家科学中心来看,它们不仅有重大科技基础设施群…