当前位置:  首页 科学 详情

从里到外三个角度来考虑图像可用性的问题

发布来源:互联网    发布时间:2021-02-24 09:56

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

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

从里到外三个角度来考虑图像可用性的问题(图1)

图像数据

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

从里到外三个角度来考虑图像可用性的问题(图2)

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

以常用的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 Buffer0xff, 0xd9。

if correctEnd.equalsendByte

console.log“image data error”

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

图像渲染

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

从里到外三个角度来考虑图像可用性的问题(图3)

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

但黑色像素不能简单地用纯黑的色值(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”

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

图像内容

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

从里到外三个角度来考虑图像可用性的问题(图4)

从里到外三个角度来考虑图像可用性的问题(图5)

总结

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

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

云时代,我们需要怎样的数据库?

本文相关词条概念解析:

图像

图像(Picture)有多种含义,其中最常见的定义是指各种图形和影像的总称。在理科的学习以及日常的学习或统计中,图像都是必不可少的组成部分,它为人类构建了一个形象的思维模式,有助于我们学习、思考问题。

图片

图是宏观指由有形式的事物、图形、图像、图画﹑照片﹑拓片等构成的平面媒体的统称。图片可以反应生活百态、真实反映具有实效性的人或事,灾难、战争、贫困等。微观指是技术制图中的基础术语,指用点、线、符号、文字和数字等描绘事物几何特征、形态、位置及大小的一种形式。随着数字采集技术和信号处理理论的发展,越来越多的图片以数字形式存储,但总体上可以分为点阵图和矢量图两大类,我们常用BMP、JPG等格式都是点阵图形,而SWF、PSD等格式的图形属于矢量图形。

相关资讯

  • 科创海H5版本全新上线啦,技术需求对接

    科创海H5版本全新上线啦,技术需求对接

    科创海H5版本全新上线啦!针对企业存在的以下问题,科创海都能一一为您解决。不知道企业适合哪些项目?遇到技术难题无法得解决?企业的创新能力不过关怎么办?如何知道企业的创新指数?企业可以参加那些创新活动?

    04-15
  • 零信任接入控制,赋能合作伙伴,为所用用户和设备

    零信任接入控制,赋能合作伙伴,为所用用户和设备

    IT168 评论无论是企业还是个人,传统办公方式还是远程办公,每时每刻我们都在面临着各式各样的网络安全问题,大家都不得不去认真思考,究竟怎样的网络安全防御才是行之有效的?为了帮助用户明确实际应用中的网

    04-15
  • LG公司的手机部门就一直处于亏损状态,再次加码2万亿本地生活

    LG公司的手机部门就一直处于亏损状态,再次加码2万亿本地生活

    1,抖音内测地图服务O2O 再次加码2万亿本地生活2,核污水的“始作俑者”东电:年入3700亿 排海只因最便宜?过去10年,饱受诟病的东电也备受福岛核事故冲击,股价从最高的每股2000日元跌至337日

    04-15
  • 利用SOLIDWORKS链阵列功能绘制链条

    利用SOLIDWORKS链阵列功能绘制链条

    对于绘制链条或者链传动机构往往是比较难做的。我们可能需要一个个零件去给他们做配合,这样涉及到多个链结的链条制作是相当繁琐。但使用SOLIDWORKS链阵列可以让这件事请变得简单便捷。1、我们使用下面的

    04-15
  • 内核列表上又开始了新一轮的讨论

    内核列表上又开始了新一轮的讨论

    文 御坂弟弟出品 OSC开源社区(ID:oschina2013)上个月,本站报道了对 Rust 的初步支持登录 Linux-Next ,以便在其可能被纳入主线内核之前进行更广泛的。现在,围绕着 Rus

    04-15
  • 统一终端管理,配置文件管理

    统一终端管理,配置文件管理

    统一终端(UEM)是一个IT最佳实践和策略,可以从单个控制台持续控制台式计算机、笔记本电脑、智能手机和平板电脑,确保其安全性。由于企业购买、员工使用(COPE)设备以及自带设备(BYOD)策略的流行,

    04-15

相关推荐

网友评论