CN112308142A - 一种图片对比方法、装置及电子设备 - Google Patents
一种图片对比方法、装置及电子设备 Download PDFInfo
- Publication number
- CN112308142A CN112308142A CN202011189060.4A CN202011189060A CN112308142A CN 112308142 A CN112308142 A CN 112308142A CN 202011189060 A CN202011189060 A CN 202011189060A CN 112308142 A CN112308142 A CN 112308142A
- Authority
- CN
- China
- Prior art keywords
- picture
- comparison
- input
- pixel point
- comparison result
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 55
- 230000006870 function Effects 0.000 claims description 18
- 238000000605 extraction Methods 0.000 claims description 2
- 238000004590 computer program Methods 0.000 claims 1
- 238000010586 diagram Methods 0.000 description 4
- 230000010365 information processing Effects 0.000 description 3
- 238000009877 rendering Methods 0.000 description 3
- 230000000694 effects Effects 0.000 description 2
- 230000003287 optical effect Effects 0.000 description 2
- 230000004044 response Effects 0.000 description 2
- 230000003044 adaptive effect Effects 0.000 description 1
- 238000003491 array Methods 0.000 description 1
- 230000000052 comparative effect Effects 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 239000000126 substance Substances 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06V—IMAGE OR VIDEO RECOGNITION OR UNDERSTANDING
- G06V10/00—Arrangements for image or video recognition or understanding
- G06V10/70—Arrangements for image or video recognition or understanding using pattern recognition or machine learning
- G06V10/74—Image or video pattern matching; Proximity measures in feature spaces
- G06V10/75—Organisation of the matching processes, e.g. simultaneous or sequential comparisons of image or video features; Coarse-fine approaches, e.g. multi-scale approaches; using context analysis; Selection of dictionaries
- G06V10/751—Comparing pixel values or logical combinations thereof, or feature values having positional relevance, e.g. template matching
Landscapes
- Engineering & Computer Science (AREA)
- Computer Vision & Pattern Recognition (AREA)
- Theoretical Computer Science (AREA)
- Evolutionary Computation (AREA)
- Computing Systems (AREA)
- Databases & Information Systems (AREA)
- Artificial Intelligence (AREA)
- General Health & Medical Sciences (AREA)
- Medical Informatics (AREA)
- Software Systems (AREA)
- Health & Medical Sciences (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Multimedia (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本发明提供了一种图片对比方法、装置及电子设备，该方法包括：接收用户针对第一图片和第二图片的第一输入；响应于所述第一输入，提取所述第一图片和所述第二图片中，每一像素点对应的数据信息；将所述第一图片与所述第二图片中，位置相同的N个像素点对应的数据信息逐一比对，生成比对结果；N为正整数；显示所述比对结果。本发明实施例提升了用户在进行图片对比时的便捷性。
Description
技术领域
本发明属于图像处理技术领域，具体涉及一种图片对比方法、装置及电子设备。
背景技术
图片对比是我们平常经常会使用的功能，一般是通过逐一比对两张图片在同一位置的像素点是否一致，或者灰度的平均值是否一致等方式实现。
目前对于用户而言，如果需要在不安装相关软件的情况下实现图片的对比，往往需要通过执行例如将图片数据转化为数组，和比对两个数组存放的数据是否一致等代码，来获取比对结果。由此可见，对于用户而言，现有的图片对比方式的便捷性较低。
发明内容
本发明实施例的目的是提供一种图片对比方法、装置及电子设备，能够解决现有的图片对比方式的便捷性较低的问题。
第一方面，本发明实施例提供了一种图片对比方法，包括：
接收用户针对第一图片和第二图片的第一输入；
响应于所述第一输入，提取所述第一图片和所述第二图片中，每一像素点对应的数据信息；
将所述第一图片与所述第二图片中，位置相同的N个像素点对应的数据信息逐一比对，生成比对结果；N为正整数；
显示所述比对结果。
第二方面，本发明实施例提供了一种图片对比装置，包括：
接收模块，用于接收用户针对第一图片和第二图片的第一输入；
提取模块，用于响应于所述第一输入，提取所述第一图片和所述第二图片中，每一像素点对应的数据信息；
比对模块，用于将所述第一图片与所述第二图片中，位置相同的N个像素点对应的数据信息逐一比对，生成比对结果；N为正整数；
第一显示模块，用于显示所述比对结果。
第三方面，本发明实施例提供了一种电子设备，该电子设备包括处理器、存储器及存储在所述存储器上并可在所述处理器上运行的程序或指令，所述程序或指令被所述处理器执行时实现如第一方面所述的方法的步骤。
第四方面，本发明实施例提供了一种可读存储介质，所述可读存储介质上存储程序或指令，所述程序或指令被处理器执行时实现如第一方面所述的方法的步骤。
在本发明实施例中，浏览器端可以通过用户对于第一图片和第二图片的第一输入，如拖拽操作或者上传操作上传第一图片和第二图片，点击比对按键的操作，提取第一图片和第二图片中，每一像素点对应的数据信息并对位置相同的N个像素点对应的数据信息逐一比对，生成并显示比对结果，从而用户可以在不下载软件的情况下，通过在浏览器端较为简单的操作实现图片的对比，提升了用户在进行图片对比时的便捷性。
附图说明
为了更清楚地说明本发明实施例的技术方案，下面将对本发明实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。
图1是本发明实施例提供的图片对比方法的流程图之一；
图2是本发明实施例提供的操作界面的示意图；
图3是本发明实施例提供的图片对比方法的流程图之二；
图4是本发明实施例提供的图片对比装置的结构示意图；
图5是本发明实施例提供的电子设备的结构示意图。
具体实施方式
下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
本发明的说明书和权利要求书中的术语“第一”、“第二”等是用于区别类似的对象，而不用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便本发明的实施例能够以除了在这里图示或描述的那些以外的顺序实施。此外，说明书以及权利要求中“和/或”表示所连接对象的至少其中之一，字符“/”，一般表示前后关联对象是一种“或”的关系。
下面结合附图，通过具体的实施例及其应用场景对本发明实施例提供的图片对比方法进行详细地说明。
参见图1，图1是本发明实施例提供的一种图片对比方法的流程图，如图1所示，包括以下步骤：
步骤101、接收用户针对第一图片和第二图片的第一输入。
步骤102、响应于所述第一输入，提取所述第一图片和所述第二图片中，每一像素点对应的数据信息。
步骤103、将所述第一图片与所述第二图片中，位置相同的N个像素点对应的数据信息逐一比对，生成比对结果；N为正整数。
步骤104、显示所述比对结果。
在本发明实施例中，上述方法步骤可以应用于浏览器端，用户可以通过在浏览器的目标页面中的操作，实现图片的比对。上述目标页面，可以为目标网址指向的页面。
在上述步骤101中，上述用户对第一图片和第二图片的第一输入，可以包括用户对于存储在终端设备上的第一图片和第二图片的选择操作。具体地，用户可以通过将第一图片和第二图片拖拽至目标页面的特定区域，或者通过选择上传存放于目录下的第一图片和第二图片，从而将上述第一图片和第二图片缓存于浏览器内。
上述目标页面内可以设置有“图片对比”按键，用户可以通过点选该按键，从而触发浏览器端对上述第一图片和第二图片的对比操作。
在本发明实施例中，可以将上述第一图片设定为源图片，而上述第二图片设定为对比图片。这样，如果用户需要将一张源图片和多张图片进行对比，则可以在每次对比后，保留源图片的缓存，从而便于用户进行多次比对。
在上述步骤102中，浏览器端可以响应于用户的第一输入，提取上述第一图片和第二图片的像素点信息。
通常而言，浏览器端可以通过编程语言中的函数对象，来读取本地数据。对于资源数据而言，不同的资源数据一般都会对应不同的URL路径，可以通过JavaScript中，filereader这一函数方法将图片文件读入内存，从而读取图片文件的URL，而该URL可以以例如Base64编码值的字符串进行表示。
本发明实施例可以通过获取图片的base64编码值，从而获取到对应的图片，从而可以读取到该图片的尺寸信息和像素点信息。
在步骤103中，上述像素点信息，通常包括每一像素的RGBA(Red Green BlueAlpha)值，其中，RGB通道一般用作像素点的色彩参数，而Alpha通道一般用作像素点的不透明参数。
同时，上述像素点信息，还可以包括每一像素点的位置信息，从而便于浏览器端对两张图片上，相同位置的像素点的RGBA值进行比对。
需要说明的是，一般对于图片对比而言，其比对的通常是尺寸信息相同的两张图片，尺寸信息不同的图片，可以认定为两张不相同的图片。当然，在其他可选的实施例中，也可以对上述第一图片和第二图片进行尺寸调整，例如，若指定上述第一图片为源图片，可以将上述第二图片依据第一图片的尺寸信息进行自适应调整，再进行图片对比。
在对第一图片和第二图片进行对比时，可以将第一图片和第二图片相同位置的N个像素点的RGBA值进行逐一比对，若存在不一致的RGBA值，则可以提取对应的像素点，从而可以具体获知第一图片与第二图片存在差异的像素点，实现像素级的图片对比。
可以理解的是，上述N个像素点，可以是上述第一图片或第二图片中的部分像素点，也可以是全部像素点。例如，在一可选的实施例中，在对较为简单的白底线条图进行比对，或者对两张差异较大的图片进行比对时，可以仅比对图片中的部分像素点，从而提升图片对比时的效率。
在上述步骤104中，上述比对结果，可以包括上述第一图片和上述第二图片是否为同一图片的结论，例如在存在相同位置信息不一致的像素点的情况下，则确定两张图片不为同一图片。同时，上述比对结果还可以包括统计得到的，上述第一图片与上述第二图片在相同位置存在差异的像素点的数量，以量化显示两张图片之间的差异。当然，上述比对结果还可以包括上述第一图片和第二图片的尺寸信息。在本发明实施例中，上述比对结果可以具体显示于上述目标页面中。
在本发明实施例中，浏览器端可以通过用户对于第一图片和第二图片的第一输入，如拖拽操作或者上传操作上传第一图片和第二图片，点击比对按键的操作，提取第一图片和第二图片中，每一像素点对应的数据信息并对位置相同的N个像素点对应的数据信息逐一比对，生成并显示比对结果，从而用户可以在不下载软件的情况下，通过在浏览器端较为简单的操作实现图片的对比，提升了用户在进行图片对比时的便捷性。
可选地，上述第一输入可以包括第一子输入和第二子输入，上述步骤101具体可以包括：
接收用户针对第一图片和第二图片的第一子输入，将所述第一图片显示于目标页面的第一显示区域，将所述第二图片显示于目标页面的第二显示区域；
接收用户的第二子输入，对所述第一图片和所述第二图片进行比对。
在本发明实施例中，浏览器端可以先接受用户的第一子输入，将上述第一图片和第二图片缓存于浏览器端，并可以在目标页面显示上述第一图片和第二图片，从而便于用户在目标页面上查看上述第一图片和第二图片。
具体地，本发明实施例中，还可以通过JavaScript语言中的react-viewer库，将上述第一图片和第二图片的base64编码值传入react-viewer库中，通过库中的函数方法实现在目标页面上拖拽和缩放上述第一图片和第二图片的操作，进而提升用户操作的便捷性。
可选地，上述步骤102具体可以包括：
获取所述第一图片和第二图片的尺寸信息；
在所述第一图片和第二图片的尺寸信息一致的情况下，提取所述第一图片和所述第二图片中，每一像素点对应的数据信息。
在本发明实施例中，由于尺寸信息不同的图片不能对应比对相同位置下的像素点的数据信息，在对上述第一图片和第二图片进行比对之前，可以先将上述第一图片和第二图片的尺寸信息进行比对，在第一图片和第二图片的尺寸信息一致的情况下，再提取第一图片和第二图片中像素点的数据信息。
进一步地，在上述第一图片和第二图片的尺寸信息不一致的情况下，浏览器端可以输出一提示消息提示两者的尺寸不相同，从而避免了在尺寸不一致的情况下，提取上述第一图片和第二图片的像素点的无效操作，提升了图片对比的效率。
当然，在其他可选的实施例中，浏览器端还可以通过将对比图片的尺寸根据源图片的尺寸进行适应性调整，从而进行图片的对比。
可选地，上述步骤102具体可以包括：
生成所述第一图片和第二图片对应的base64编码；
基于所述base64编码，获取所述第一图片与所述第二图片中，每一像素点的RGBA值。
在本发明实施例中，上述步骤102中提取上述第一图片和第二图片的像素点信息的步骤，可以包括读取上述第一图片和第二图片的URL路径，并将第一图片和第二图片的路径分别转化为base64编码值，从而浏览器端可以通过将上述base64编码赋值给对应的图片的源(Source，src)标签，从而将上述base64编码与src标签进行关联。由于src标签指向对应的图片的存储路径，因此可以通过调用src标签所对应的路径地址，获取到对应的图片。
进一步地，上述基于所述base64编码，获取所述第一图片与所述第二图片中，每一像素点的RGBA值的步骤具体可以包括：
创建canvas对象，所述canvas对象用于存放所述第一图片和第二图片；
基于目标函数获取所述第一图片与所述第二图片中，每一像素点的RGBA值；
其中，所述目标函数的输入参数为所述第一图片和第二图片对应的base64编码，返回值为所述第一图片与所述第二图片中，每一像素点的RGBA值所组成的数组。
在通过base64编码获取到对应的图片后，本发明实施例可以利用编程语言中的canvas对象，也即超文本标记语言(HyperText Markup Language，HTML)的画布元素，通过定义API支持脚本化客户端绘图操作。上述创建canvas对象的过程，也即相当于将上述第一图片和上述第二图片，存放于HTML画布上的过程。而对于canvas对象而言，其可以存在针对该对象的不同函数方法。
在本发明实施例中，可以利用目标函数，也即通过getImageData的函数方法，从上述canvas对象中获取图片每一像素点的RGBA值。其中，像素点的RGBA值可以包括但不限于8位无符号整型固定数组(Uint8ClampedArray)的形式。
需要说明的是，上述getImageData的函数方法的输入值可以包括起始像素点的坐标，以及图片的尺寸信息，而其返回值可以为每一像素点RGBA值。上述getImageData的函数方法可以实现从起始像素点开始，获取到指定尺寸大小中全部像素点的数据信息，而每一像素点的数据信息，可以以一个数组的形式存在。
应理解，每一像素点相对于起始像素点，均存在其特有的标识序号，该标识序号可以根据获取上述N个像素点的数据信息的顺序确定。上述像素点的标识序号和RGBA值，可以存放于同一数组中，从而便于将特定位置上的像素点与其RGBA值关联。
本发明实施例中，可以通过目标函数获取到canvas对象中存放的第一图片和第二图片的像素点信息，从而便于进行相同位置下，像素点的数据信息的对比。
可选地，上述步骤103具体可以包括：
基于每一像素点的位置信息，将所述第一图片与所述第二图片中，位置相同的N个像素点的RGBA值逐一比对，生成比对结果；
其中，所述比对结果包括所述第一图片与所述第二图片位置相同的N个像素点中，存在差异的像素点的RGBA值。
在本发明实施例中，在获取到上述第一图片和第二图片中，每一像素点的RGBA值后，可以将相同位置上的像素点的RGBA逐一比对，从而判断第一图片和第二图片是否存在差异。
具体地，可以通过JavaScript语言中，pixelmatch库实现第一图片和第二图片中，相同位置的像素点的RGBA值的比对。具体地，可以将上述第一图片中的上述N个像素点的RGBA值，和上述第二图片中上述N个像素点的RGBA值，以上述8位无符号整型固定数组(Uint8ClampedArray)的形式，分别作为输入参数，传入上述pixelmatch库中进行逐一对比，从中获取到像素点信息存在差异的像素点，并返回与之对应的8位无符号整型固定数组。
本发明实施例通过逐一比对第一图片与第二图片中，位置相同的N个像素点的RGBA值，从而可以具体获知第一图片和第二图片中，存在差异的像素点，实现了像素级的对比，从而提升了图片对比的精度。
可选地，在上述步骤104之后，上述方法还可以包括：
基于所述第一图片、第二图片和比对结果，在目标页面的第一显示区域显示第三图片；
其中，所述第三图片中，所述第一图片与所述第二图片存在差异的像素点突出显示。
应理解，在获取到上述第一图片和第二图片中，存在差异的像素点之后，可以将修改存在差异的像素点的RGBA值，例如，将存在差异的像素点修改为红色，并基于此生成第三图片，显示于上述目标页面的第一显示区域。
此外，除了将存在差异的像素点突出显示外，在本发明实施例中，上述第三图片的其他像素点可以虚化显示，这样用户可以通过上述第三图片得知上述第一图片和第二图片之间，具体存在差异的像素点区域，提升了用户体验。
为了更好的理解本发明，以下将以具体的实施方式为例详细阐述本发明的具体实现过程。
图2为操作界面，由四个区域组成：从上都下从左到右分别是源图片展示区域、对比图片展示区域、结果图片展示区域和结果信息展示区域，支持拖拽和点击上传两种图片传入方式。
其中，三块图像显示区域A、B和C中，可以通过点击下方加减号进行显示图片的放大或缩小，同样支持鼠标都拖拽缩放操作，点击右上角关闭按钮，会同步关闭掉图片的展示内容。
右下角结果信息展示区域的展示内容可以包括对比结果状态图标、差异像素点和图片尺寸等。
本发明实施例中，浏览器端可以由4个模块组成，分别是图片信息读取模块、图片信息处理模块、图片展示模块和图片对比模块。其中，
a.图片信息读取模块：在拖拽或者点击上传完成后，需要通过fileReader.readAsDataURL(file)函数读取图片base64信息。
b.图片信息处理模块：将base64信息赋值到img对象中，并将img绘制到canvas中，通过canvas获取对比时所需的Uint8ClampedArray信息。
c.图片展示模块：即为参照图2中前端展示部分，使用react-viewer库将base64信息传入可进行图片的展示并支持拖拽缩放操作。
d.图片对比模块：将图片信息处理模块得到的Uint8ClampedArray传入pixelmatch库进行对比，得到对比图片的Uint8ClampedArray信息，通过canvas将信息转换为base64进行图片展示，并根据差异值渲染差异信息模块。
进一步地，参照图3，对比流程如图3所示：
a.首先点击上传图片或者将图片拖拽至对应区域中，通过fileReader.readAsDataURL(file)读取图片base64值并保存。
b.新建图片，并将base64赋值到图片中进行前端展示，并读取图片尺寸保存，当源图片和对比图片都上传完或拖拽完成后触发对比程序。
c.创建canvas对象加载图片，通过通过getImageData获取图片的Uint8ClampedArray值。
d.将两个图片的Uint8ClampedArray输入到pixelmatch库中对比差异，得到差异图片的差异像素点数和Uint8ClampedArray，使用canvas将Uint8ClampedArray转换为base64值。
e.将base64赋值到img中进行渲染，并根据差异像素点数渲染信息展示区。
需要说明的是，本发明实施例提供的图片对比方法，执行主体可以为图片对比装置，或者该图片对比装置中的用于执行加载图片对比方法的控制模块。本发明实施例中以图片对比装置执行加载图片对比方法为例，说明本发明实施例提供的图片对比方法。
参见图4，图4是本发明实施例提供的图片对比装置400的结构图，如图4所示，上述图片对比装置400包括：
接收模块410，用于接收用户针对第一图片和第二图片的第一输入；
提取模块420，用于响应于所述第一输入，提取所述第一图片和所述第二图片中，每一像素点对应的数据信息；
比对模块430，用于将所述第一图片与所述第二图片中，位置相同的N个像素点对应的数据信息逐一比对，生成比对结果；N为正整数；
第一显示模块440，用于显示所述比对结果。
本发明实施例中可以通过接收模块410接收用户针对第一图片和第二图片的第一输入，通过提取模块420提取第一图片和第二图片中，每一像素点对应的数据信息，并通过比对模块430将第一图片与第二图片中，位置相同的N个像素点对应的数据信息逐一比对，生成比对结果，在通过第一显示模块440显示比对结果，从而用户可以在不下载软件的情况下，通过在浏览器端较为简单的操作实现图片的对比，提升了用户在进行图片对比时的便捷性。
可选地，上述提取模块420具体可以包括：
生成单元，用于生成所述第一图片和第二图片对应的base64编码；
第一获取单元，用于基于所述base64编码，获取所述第一图片与所述第二图片中，每一像素点的RGBA值。
可选地，上述第一获取单元具体可以用于：
创建canvas对象，所述canvas对象用于存放所述第一图片和第二图片；
基于目标函数获取所述第一图片与所述第二图片中，每一像素点的RGBA值；
其中，所述目标函数的输入参数为所述第一图片和第二图片对应的base64编码，返回值为所述第一图片与所述第二图片中，每一像素点的RGBA值所组成的数组。
可选地，上述比对模块430具体可以包括：
比对单元，用于基于每一像素点的位置信息，将所述第一图片与所述第二图片中，位置相同的N个像素点的RGBA值逐一比对，生成比对结果；
其中，所述比对结果包括所述第一图片与所述第二图片位置相同的N个像素点中，存在差异的像素点的RGBA值。
可选地，在所述生成比对结果之后，上述图片对比装置400还可以包括：
第二显示模块，用于基于所述第一图片、第二图片和比对结果，在目标页面的第一显示区域显示第三图片；
其中，所述第三图片中，所述第一图片与所述第二图片存在差异的像素点突出显示。
可选地，所述第一输入包括第一子输入和第二子输入，上述接收模块具体可以包括：
第一接收单元，用于接收用户针对第一图片和第二图片的第一子输入，将所述第一图片显示于目标页面的第一显示区域，将所述第二图片显示于目标页面的第二显示区域；
第二接收单元，用于接收用户的第二子输入，对所述第一图片和所述第二图片进行比对。
可选地，上述提取模块420具体可以包括：
第二获取单元，用于获取所述第一图片和第二图片的尺寸信息；
提取单元，用于在所述第一图片和第二图片的尺寸信息一致的情况下，提取所述第一图片和所述第二图片中，每一像素点对应的数据信息。
本发明实施例中的图片对比装置可以是装置，也可以是终端中的部件、集成电路、或芯片。该装置可以是移动电子设备，也可以为非移动电子设备。示例性的，移动电子设备可以为手机、平板电脑、笔记本电脑、掌上电脑、车载电子设备、可穿戴设备、超级移动个人计算机(ultra-mobile personal computer，UMPC)、上网本或者个人数字助理(personaldigital assistant，PDA)等，非移动电子设备可以为服务器、网络附属存储器(NetworkAttached Storage，NAS)、个人计算机(personal computer，PC)、电视机(television，TV)、柜员机或者自助机等，本发明实施例不作具体限定。
本发明实施例提供的图片对比装置能够实现图1的方法实施例中图片对比方法实现的各个过程，为避免重复，这里不再赘述。
可选的，本发明实施例还提供一种电子设备，包括处理器510，存储器509，存储在存储器509上并可在所述处理器510上运行的程序或指令，该程序或指令被处理器510执行时实现上述图片对比方法实施例的各个过程，且能达到相同的技术效果，为避免重复，这里不再赘述。
需要注意的是，本发明实施例中的电子设备包括上述所述的移动电子设备和非移动电子设备。
本发明实施例还提供一种可读存储介质，所述可读存储介质上存储有程序或指令，该程序或指令被处理器执行时实现上述图片对比方法实施例的各个过程，且能达到相同的技术效果，为避免重复，这里不再赘述。
其中，所述处理器为上述实施例中所述的电子设备中的处理器。所述可读存储介质，包括计算机可读存储介质，如计算机只读存储器(Read-Only Memory，ROM)、随机存取存储器(Random Access Memory，RAM)、磁碟或者光盘等。
需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者装置不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者装置所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括该要素的过程、方法、物品或者装置中还存在另外的相同要素。此外，需要指出的是，本发明实施方式中的方法和装置的范围不限按示出或讨论的顺序来执行功能，还可包括根据所涉及的功能按基本同时的方式或按相反的顺序来执行功能，例如，可以按不同于所描述的次序来执行所描述的方法，并且还可以添加、省去、或组合各种步骤。另外，参照某些示例所描述的特征可在其他示例中被组合。
通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质(如ROM/RAM、磁碟、光盘)中，包括若干指令用以使得一台终端(可以是手机，计算机，服务器，空调器，或者网络设备等)执行本发明各个实施例所述的方法。
上面结合附图对本发明的实施例进行了描述，但是本发明并不局限于上述的具体实施方式，上述的具体实施方式仅仅是示意性的，而不是限制性的，本领域的普通技术人员在本发明的启示下，在不脱离本发明宗旨和权利要求所保护的范围情况下，还可做出很多形式，均属于本发明的保护之内。
Claims (10)
1.一种图片对比方法，其特征在于，包括：
接收用户针对第一图片和第二图片的第一输入；
响应于所述第一输入，提取所述第一图片和所述第二图片中，每一像素点对应的数据信息；
将所述第一图片与所述第二图片中，位置相同的N个像素点对应的数据信息逐一比对，生成比对结果；N为正整数；
显示所述比对结果。
2.根据权利要求1所述的图片对比方法，其特征在于，所述提取所述第一图片和所述第二图片中，每一像素点对应的数据信息的步骤包括：
生成所述第一图片和第二图片对应的base64编码；
基于所述base64编码，获取所述第一图片与所述第二图片中，每一像素点的RGBA值。
3.根据权利要求2所述的图片对比方法，其特征在于，所述基于所述base64编码，获取所述第一图片与所述第二图片中，每一像素点的RGBA值的步骤包括：
创建canvas对象，所述canvas对象用于存放所述第一图片和第二图片；
基于目标函数获取所述第一图片与所述第二图片中，每一像素点的RGBA值；
其中，所述目标函数的输入参数为所述第一图片和第二图片对应的base64编码，返回值为所述第一图片与所述第二图片中，每一像素点的RGBA值所组成的数组。
4.根据权利要求2所述的图片对比方法，其特征在于，所述将所述第一图片与所述第二图片中，位置相同的N个像素点对应的数据信息逐一比对，生成比对结果的步骤包括：
基于每一像素点的位置信息，将所述第一图片与所述第二图片中，位置相同的N个像素点的RGBA值逐一比对，生成比对结果；
其中，所述比对结果包括所述第一图片与所述第二图片位置相同的N个像素点中，存在差异的像素点的RGBA值。
5.根据权利要求1-4中任一项所述的图片对比方法，其特征在于，在所述生成比对结果的步骤之后，所述方法还包括：
基于所述第一图片、第二图片和比对结果，在目标页面的第一显示区域显示第三图片；
其中，所述第三图片中，所述第一图片与所述第二图片存在差异的像素点突出显示。
6.根据权利要求1-4中任一项所述的图片对比方法，其特征在于，所述第一输入包括第一子输入和第二子输入，所述接收用户针对第一图片和第二图片的第一输入的步骤包括：
接收用户针对第一图片和第二图片的第一子输入，将所述第一图片显示于目标页面的第一显示区域，将所述第二图片显示于目标页面的第二显示区域；
接收用户的第二子输入，对所述第一图片和所述第二图片进行比对。
7.根据权利要求1-4中任一项所述的图片对比方法，其特征在于，所述提取所述第一图片和所述第二图片中，每一像素点对应的数据信息的步骤包括：
获取所述第一图片和第二图片的尺寸信息；
在所述第一图片和第二图片的尺寸信息一致的情况下，提取所述第一图片和所述第二图片中，每一像素点对应的数据信息。
8.一种图片对比装置，其特征在于，包括：
接收模块，用于接收用户针对第一图片和第二图片的第一输入；
提取模块，用于响应于所述第一输入，提取所述第一图片和所述第二图片中，每一像素点对应的数据信息；
比对模块，用于将所述第一图片与所述第二图片中，位置相同的N个像素点对应的数据信息逐一比对，生成比对结果；N为正整数；
第一显示模块，用于显示所述比对结果。
9.一种电子设备，其特征在于，包括处理器，存储器及存储在所述存储器上并可在所述处理器上运行的程序或指令，所述程序或指令被所述处理器执行时实现如权利要求1至7中任一项所述的图片对比方法的步骤。
10.一种可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1至7中任一项所述的图片对比方法的步骤。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011189060.4A CN112308142A (zh) | 2020-10-30 | 2020-10-30 | 一种图片对比方法、装置及电子设备 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011189060.4A CN112308142A (zh) | 2020-10-30 | 2020-10-30 | 一种图片对比方法、装置及电子设备 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN112308142A true CN112308142A (zh) | 2021-02-02 |
Family
ID=74332606
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202011189060.4A Pending CN112308142A (zh) | 2020-10-30 | 2020-10-30 | 一种图片对比方法、装置及电子设备 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112308142A (zh) |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN108596270A (zh) * | 2018-05-07 | 2018-09-28 | 平安普惠企业管理有限公司 | 图片对比方法、装置、设备及计算机可读存储介质 |
| CN109410141A (zh) * | 2018-10-26 | 2019-03-01 | 北京金山云网络技术有限公司 | 一种图像处理方法、装置、电子设备及存储介质 |
| CN109525901A (zh) * | 2018-11-27 | 2019-03-26 | Oppo广东移动通信有限公司 | 视频处理方法、装置、电子设备及计算机可读介质 |
| CN110473249A (zh) * | 2019-07-12 | 2019-11-19 | 平安普惠企业管理有限公司 | 一种网页用户界面与设计稿的对比方法、装置及终端设备 |
| CN111803953A (zh) * | 2020-07-21 | 2020-10-23 | 腾讯科技（深圳）有限公司 | 图像处理方法、装置、计算机设备和计算机可读存储介质 |
-
2020
- 2020-10-30 CN CN202011189060.4A patent/CN112308142A/zh active Pending
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN108596270A (zh) * | 2018-05-07 | 2018-09-28 | 平安普惠企业管理有限公司 | 图片对比方法、装置、设备及计算机可读存储介质 |
| CN109410141A (zh) * | 2018-10-26 | 2019-03-01 | 北京金山云网络技术有限公司 | 一种图像处理方法、装置、电子设备及存储介质 |
| CN109525901A (zh) * | 2018-11-27 | 2019-03-26 | Oppo广东移动通信有限公司 | 视频处理方法、装置、电子设备及计算机可读介质 |
| CN110473249A (zh) * | 2019-07-12 | 2019-11-19 | 平安普惠企业管理有限公司 | 一种网页用户界面与设计稿的对比方法、装置及终端设备 |
| CN111803953A (zh) * | 2020-07-21 | 2020-10-23 | 腾讯科技（深圳）有限公司 | 图像处理方法、装置、计算机设备和计算机可读存储介质 |
Non-Patent Citations (1)
| Title |
|---|
| 李念: "《基于HTML5的Web设计与前端开发研究分析》", 电子科技大学出版社, pages: 74 * |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN107885848B (zh) | 基于web技术的网页截屏方法 | |
| CN104866755B (zh) | 应用程序解锁界面背景图片的设置方法、装置及电子设备 | |
| CN110750664B (zh) | 图片的显示方法及装置 | |
| WO2022048141A1 (zh) | 一种图像处理方法及装置、计算机可读存储介质 | |
| CN109121000A (zh) | 一种视频处理方法及客户端 | |
| CN113691816A (zh) | 图像显示方法、装置、显示设备及存储介质 | |
| JP5042346B2 (ja) | 情報表示装置、方法及びプログラム | |
| CN110263301B (zh) | 用于确定文字的颜色的方法和装置 | |
| CN109065001B (zh) | 一种图像的降采样方法、装置、终端设备和介质 | |
| US20210248658A1 (en) | Dynamic product information during barcode scanning | |
| CN104184791A (zh) | 图像效果提取 | |
| CN111223155A (zh) | 图像数据处理方法、装置、计算机设备和存储介质 | |
| CN109615620A (zh) | 图像压缩度识别方法、装置、设备及计算机可读存储介质 | |
| CN105630319A (zh) | 生成二维码的方法及装置、二维码安全解码的方法及装置 | |
| CN112308142A (zh) | 一种图片对比方法、装置及电子设备 | |
| CN108924624B (zh) | 信息处理方法和装置 | |
| CN111428452A (zh) | 一种批注数据保存方法及装置 | |
| CN104978414A (zh) | 一种内容搜索方法及终端 | |
| CN112749769B (zh) | 图形码检测方法、装置、计算机设备及存储介质 | |
| CN113010815A (zh) | 显示方法和电子设备 | |
| CN114518859A (zh) | 显示控制方法、装置、电子设备及存储介质 | |
| CN113676734A (zh) | 图像压缩方法和图像压缩装置 | |
| KR100939364B1 (ko) | 이미지 검색시스템 및 그 방법 | |
| CN112364616B (zh) | 一种电子表格的处理方法、装置、电子设备及存储介质 | |
| KR102599525B1 (ko) | 관심 이미지의 시인성을 개선한 화면 표출 방법, 장치 및 시스템 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| RJ01 | Rejection of invention patent application after publication | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20210202 |