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使用情況，如果您曾用過，有更好的經驗，或者建議，歡迎留言交流