JS图像处理:找出两张图片的差异部分并提取出来

两张图片比较

需求:

图A：

图B

图A图B尺寸相同，最后需求得到结果如图C:

关键API：

var imgData=context.getImageData(x,y,width,height);

参数值

参数	描述
x	开始复制的左上角位置的 x 坐标。
y	开始复制的左上角位置的 y 坐标。
width	将要复制的矩形区域的宽度。
height	将要复制的矩形区域的高度。

首先获取图B的像素点数据 var pixelData = canvas .getContext("2d") .getImageData(0, 0, img.width, img.height).data; for (var i = 0; i < pixelData.length; i += 4) { if ( pixelData[i] < 10 && pixelData[i + 1] < 10 && pixelData[i + 2] < 10 ) { this.frameData[idx] = [i]; idx++; } }

由于js没有提供image类处理的API，需将加载的图像用canvas画出来。
getImageData().data可取得图像所有像素点的RGBA值的数组，按[a.r,a.g,a.b,a.a,b.a,b.g,b.b,b.a....]排列,
所以pixelData[i]，pixelData[i + 1]，pixelData[i + 2]则为某像素点的RGB值，均小于10取接近黑色的像素点，则为图B的黑框。最后将数据保存到数组。

然后同理取得图A的像素点数据，然后取之前保存的B图黑色外框的下标值，进行重新赋值。这里赋值成255，则为白色，与背景颜色相同，达到去除图A外框的效果。

     var pixelData = canvas .getContext("2d") .getImageData(0, 0, img.width, img.height).data;
for (var i = 0; i < pixelData.length; i += 4)
{
if ( pixelData[i] < 10 && pixelData[i + 1] < 10 && pixelData[i + 2] < 10 )
{
this.frameData[idx] = [i]; idx++;
}
}

最后通过canvas.toDataURL获取图片的base64值,保存为图片

完整代码见

http://icelily.xyz/wordpress/?p=119

JS图像处理:找出两张图片的差异部分并提取出来相关推荐

js 快速找出两个数组中的不同元素或对象
js 快速找出两个数组中的不同元素 var arr1 = [0,1,2,3,4,5]; var arr2 = [0,4,6,1,3,9]; function getArrDifference(arr1 ...
JS案例——找出两个数组中的不同元素或对象、数组去重
一.找出两个数组中的不同元素或对象 1. 数据 var arr1 = ["张瑞淑", "徐海涛", "谢岗岗", "薛鹏" ...
快速找出两个列表差异部分
2019独角兽企业重金招聘Python工程师标准>>> int [] arr0 = new int [] {1 ,5 ,12 ,21 ,11 ,15 ,8 ,30} ;int [] ...
如何评估两张图片的差异
如何评估两张图片的差异方法一,图像直方图比较就像人的指纹一样,没有哪两张的照片的直方图会是一样的(拍摄的图片),所以只要将两张图片拉倒ps里面看直方图就可以了. 方法二,DiffImg 方法三,I ...
找出两个字符串中最大子字符串,如abractyeyt,dgdsaeactyey的最大子串为actyet
// 最大子字符串.cpp : 定义控制台应用程序的入口点. // //找出两个字符串中最大子字符串,如"abractyeyt","dgdsaeactyey"的 ...
找出两个字符串中最长的相同子字符串
//找出两个字符串中最长的相同子字符串public class Stringdemo {public static void main(String[] args) {String str1 = ne ...
高效的找出两个List中的不同元素
转自同名博文,未知真正出处,望作者见谅如题:有List<String> list1和List<String> list2,两个集合各有上万个元素,怎样取出两个集合中不同的元素 ...
找出两个数组相同的元素
题目:找出两个数组(有重)相同的元素,两种方法 public class 出两个数组相同的元素 { public static void main(String[] args) { // TODO A ...
C语言找出两个字符串唯一不同的一个字符(附完整源码)
C语言找出两个字符串唯一不同的一个字符 C语言找出两个字符串唯一不同的一个字符完整源码(定义,实现,main函数测试) C语言找出两个字符串唯一不同的一个字符完整源码(定义,实现,main函数测试) ...

JS图像处理:找出两张图片的差异部分并提取出来

参数值

JS图像处理:找出两张图片的差异部分并提取出来相关推荐

最新文章

热门文章