两张图片比较
需求:
图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