canvas 裁剪空白区域

Question

用 canvas 做了一个电子签名，可是用户签名后留白太多。有什么办法可以截取空白区域吗？
示例原图：

我是在签字过程中，获取鼠标经过的区域，从而得到如下图红色区域坐标。

然后传给 img 对象，再绘制到 canvas 上裁剪红色区域。

有什么其他方式可以做到吗？

谢谢！

Answer 1

通过 ImageData 扫描像素点，一行一行的扫描，维护左上角右下角坐标，或者右上角左下角坐标。

Answer 2

//将签名后的canvas存为图片var oldUrl = canvas1.toDataURL();var originImage = new Image();originImage.src = oldUrl;//用9参数的drawImage方法对图片进行裁减ctx2.drawImage(originImage,startX,startY,cropWidth,cropHeight,0,0,cropWidth,cropHeight);var newUrl = canvas2.toDataURL();var newImage = new Image();newImage.src = newUrl;

Answer 3

首先是可以做到的,&nbsp;canvas.getContext('2d').getImageData(0, 0, 宽, 高)会返回一个当前canvas的图像数据对象,其中有一个data属性,是一个一维数组,这个一维数组,每4个下标分别代表了一个像素点的R,G,B,A的值,楼主只需要遍历这些值就能找到边界了.下面是伪代码实现var canvas = document.createElement('canvas')canvas.width = 200canvas.height = 210document.body.appendChild(canvas)var ctx = canvas.getContext('2d')ctx.beginPath()ctx.moveTo(0,50)ctx.lineTo(100,50)ctx.lineTo(100,25)ctx.fill() // 出于演示目的随便画了个三角形var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height).datavar lOffset = canvas.width, rOffset = 0,tOffset = canvas.height, bOffset = 0for (var i = 0; i < canvas.width; i++) {&nbsp; &nbsp; for (var j = 0; j < canvas.height; j++) {&nbsp; &nbsp; &nbsp; &nbsp; var pos = (i + canvas.width * j) * 4&nbsp; &nbsp; &nbsp; &nbsp; if (imgData[pos] > 0 || imgData[pos + 1] > 0 || imgData[pos + 2] || imgData[pos + 3] > 0) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // 说第j行第i列的像素不是透明的&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // 楼主貌似底图是有背景色的,所以具体判断RGBA的值可以根据是否等于背景色的值来判断&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; bOffset = Math.max(j, bOffset) // 找到有色彩的最底部的纵坐标&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; rOffset = Math.max(i, rOffset) // 找到有色彩的最右端&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; tOffset = Math.min(j, tOffset) // 找到有色彩的最上端&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; lOffset = Math.min(i, lOffset) // 找到有色彩的最左端&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }}// 由于循环是从0开始的,而我们认为的行列是从1开始的lOffset++rOffset++tOffset++bOffset++console.log(lOffset, rOffset, tOffset, bOffset) // 1 100 26 50// 意思是说包含有像素的区域是 左边第1行,到右边第100行,顶部第26行,到底部50行// 此时如果你想找到外部区域的话,就是 left和top减1 &nbsp;right和bottom加1的区域// 分别是0, 101, 25, 51.这个区间能够刚好包裹住