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