h5页面使用html2canvas实现截图功能

项目中用到，将昵称合并成图片，以下为代码：

<script src="js/html2canvas.min.js"></script>
<div id="box">昵称</div>
<img src="./images/bg.jpg" id="img_box"/>

html2canvas(document.getElementById("box"), {
	useCORS : true,
	onrendered : function(canvas) {
	  // console.log(canvas.toDataURL()) 打印的就是生成图片的base64编码
	  $("#img_box").attr('src',canvas.toDataURL());
	},
	allowTaint: true,
});

简单的使用就如上，便可以拿到对应的图片，但是有几点注意事项：

1、截图中要显示的图片，不可存在跨域问题（图片路径中不可以含有本项目之外的域名），之前写过一个获取微信头像的例子，公司不希望保存再服务器上就拿到头像，解决办法是：后台将拿到的头像转化成base64编码再传给你。

2、之前在用的时候，会出现截图内的图像位置错位了，后来发现是因为多次执行改截图方法导致的，后来控制只可以保存一次，错位问题解决。

3、还遇到过保存的截图为黑屏的情况，当时查看生成的base64编码为 data,;，后来发现原因是所在元素的周围有污染，将一些元素remove()之后就可以了。

4、还有就是所截图片比较模糊，导致图片上的二维码不能识别，解决方法就是，先把canvas长宽设置为$("#box")的二倍，再将图像放大二倍放在canvas上，代码如下：

 	var c_w = $("#box").width();
	var c_h = $("#box").height();
	var canvas = document.createElement("canvas");
	canvas.width = c_w * 2;
	canvas.height = c_h * 2;
	canvas.style.width = c_w +"px";
	canvas.style.height = c_h +"px";
	var context =canvas.getContext("2d");
	context.scale(2,2)
	html2canvas(document.getElementById("box"), {
		canvas:canvas,
		useCORS : true,
		onrendered : function(canvas) {
			// console.log(canvas.toDataURL())
			$("#img_box").attr('src',canvas.toDataURL());
		},
		allowTaint: true,
	});
	//我使用的时候，放大二倍生成的图片还是比较模糊，有些手机可以识别图中小小的二维码，
	//有些手机不可以，我是考虑再放大一些，后来改成放大四倍，之前识别不了的，
	//也可以识别了，这个倍数本不能完全解决问题，但是误打误撞的解决了

以上为记录我的html2canvas使用情况，如果您曾用过，有更好的经验，或者建议，欢迎留言交流