JS通过canvas自动裁剪png图片多余的空白部分

之前使用canvas弄了一个签名页面，但是由于最后返回的图片实际上宽高有很多空白的地方导致后期想使用这张图片填充时会很麻烦。

未裁剪前：

---

裁剪后：

可以看到这张图片的上半部分跟下半部分还有非常多的空余位置，导致后期没法使用。所以又做了一个通过canvas来裁剪png图片的方法。

var img = new Image();//创建图片对象
img.src=base64;
img.onload = function(){
    var c = document.createElement('canvas');//创建处理画布对象
	var ctx = c.getContext('2d');
	c.width = img.width;
	c.height = img.height;
	ctx.drawImage(img,0,0);//绘制
	var imgData = ctx.getImageData(0, 0, c.width, c.height).data;//读取图片数据
	var lOffset = c.width, rOffset = 0,tOffset = c.height, bOffset = 0;
	for (var i = 0; i < c.width; i++) {
		for (var j = 0; j < c.height; j++) {
		    var pos = (i + c.width * j) * 4
		    if (imgData[pos] == 255 || imgData[pos + 1] == 255 || imgData[pos + 2] == 255 || imgData[pos + 3] == 255) {
		        bOffset = Math.max(j, bOffset); // 找到有色彩的最下端
		        rOffset = Math.max(i, rOffset); // 找到有色彩的最右端
		        tOffset = Math.min(j, tOffset); // 找到有色彩的最上端
		        lOffset = Math.min(i, lOffset); // 找到有色彩的最左端
		    }
	    }
	}
	lOffset++;
	rOffset++;
	tOffset++;
	bOffset++;
	var x = document.createElement("canvas");//创建处理后画布对象
	x.width = rOffset-lOffset;
	x.height = bOffset-tOffset;
	var xx = x.getContext("2d");
	xx.drawImage(img, lOffset, tOffset, x.width, x.height, 0, 0, x.width, x.height);//绘制
	console.log(x.toDataURL());//得到最终裁剪出来的base64
}

首先创建或者获取一个img节点，然后在图片加载完毕的函数中填充到canvas里再通过getImageData得到图片的所有内容，接着通过循环自动判断当前canvas中有颜色的位置起始点，找到范围之后就可以通过canvas的drawImage方法的九个参数的重载方法实现图片截取。最后将截取后的canvas通过toDataURL得到base64后就成功了