首先熟悉htmlcanvas2的使用方法，看看github的使用說明

        html2canvas(document.body).then(function(canvas) {
            document.body.appendChild(canvas);
        });

這是我要擷取的網頁的html效果圖

使用htmlcanvas2需要注意一下幾個坑（這都是我一個一個踩過的）：

1 如果你擷取的網頁中有圖片和文字，在本地測試時生成圖片時，網頁中的圖片截取出來竟然是空白？

（心裡在想：什麼狗屁外掛根本不管用 圖片都擷取不了）

原因：程式必須放在伺服器下執行，不然的話網頁中的圖片是出不來的

2 把程式放在伺服器上運行了，發現圖片還是出不來，有圖片的地方還是一片空白？生成的圖片效果是這樣的

為什麼一個二維碼圖片可以出來，另一個二維碼圖片沒有出來？這就要從二維碼身上找原因了

我的二維碼的生成用到了這個外掛jquery.qrcode-logo.js，呼叫方法如下：

$("#code").qrcode({ 
	render : "canvas",
	text: pay_url,
	width:312,
	height:312,
	src: 'http://css.zzebz.com/images/kkbl.jpg'
});

發現兩個二維碼的呼叫區別是多了一個  src: 'http://css.zzebz.com/css//images/kkbl.jpg' 就是二維碼中間的logo小圖片，這個依然是圖片的跨域問題，所以我們一定要避免擷取的網頁中的圖片跨域問題！把這個路徑換成本地路徑 src: '__STATIC__/images/kkbl.jpg'；

這裡還會存在一個問題，在jquery.qrcode-logo的二維碼沒有生成之前htmlcanvas已經開始生成圖片了，這樣生成的圖片中的二維碼是空白，

所以htmlcanvas2的執行要延遲1s。現在生成圖片之後是可以手動 右鍵滑鼠 將圖片另存為 儲存圖片的。這樣截圖就OK了，程式碼如下：

	setTimeout(function(){
		html2canvas($("#view"), {
			onrendered: function(canvas) {
				$("#qrbox").append(canvas);
			}
		});
	},1000);

		var type = 'png';
		var imgData = canvas.toDataURL(type);
		var _fixType = function(type) {
			type = type.toLowerCase().replace(/jpg/i, 'jpeg');
			var r = type.match(/png|jpeg|bmp|gif/)[0];
			return 'image/' + r;
		};
		imgData = imgData.replace(_fixType(type),'image/octet-stream');
		var saveFile = function(data, filename){
			var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
			save_link.href = data;
			save_link.download = filename;
		
			var event = document.createEvent('MouseEvents');
			event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
			save_link.dispatchEvent(event);
		};
		var filename = shopname + '.' + type;
		saveFile(imgData,filename);

html2canvas2生成的圖片是一個大的canvas,只有獲取到了這個canvas才可以自定義儲存圖片的名稱，

這裡的關鍵在於如何獲取到這個canvas,這個canvas上並沒有id 什麼都沒有

首先想到的通過id="qrbox"獲取裡邊的子元素

var can = document.getElementById("qrcode").getElementsByTagName("canvas")[0];
console.log(can);結果：<canvas width="120" height="120"></canvas>

得到的canvas是這樣的 寬高是120的canvas，這個canvas竟然不是那張大圖片的canvas，而是右下角jquery.qrcode-logo生成的那張二維碼？這裡非常的怪異！

嘗試著獲取#qrcode的第一個子元素第二個子元素，全部是undefined，通過qrbox中的子元素來獲取這個大的canvas失敗了！！

所以我就想到如何為htmlcanvas2生成的這個大的canvas增加一個id，這樣就要修改htmlcanvas2原始碼了

原始碼三千多行，其實我的內心是崩潰的，多半這個id是不好加上的

我在想既然htmlcanvas2繪製出了這個大的canvas,那我就去找原始碼中繪製canvas的程式碼createElement("canvas")，繪製的時候就手動增加id，就這樣一個一個的打出來試試

第一處：
var croppedCanvas = document.createElement("canvas");
croppedCanvas.setAttribute("id","myCanvas");
console.log(croppedCanvas);
第二處：
this.canvas = this.options.canvas || this.document.createElement("canvas");
this.canvas.setAttribute("id","myCanvas");
console.log(this.canvas);
第三處：
var ctx, canvas = document.createElement('canvas');
canvas.setAttribute("id","myCanvas");canvas.setAttribute("id","myCanvas");console.log(canvas);
canvas.width = size.width;
canvas.height = size.height; 
...................就不一一列出了

令我驚喜的是，終於得到了我想要的id,現在就可以用id來找到這個canvas了,結合我的專案修改之後自定義儲存圖片名稱的完整程式碼如下：

var shopname = "糖貓貓的店鋪";
var c = document.getElementById("myCanvas");console.log(c);
document.getElementById("btnsave").addEventListener("click",function(){
	if(c==null){
		alert("獲取資料失敗，請重新整理頁面！");
		return false;
	}
	var type = 'png';
	var imgData = c.toDataURL(type);
	var _fixType = function(type) {
		type = type.toLowerCase().replace(/jpg/i, 'jpeg');
		var r = type.match(/png|jpeg|bmp|gif/)[0];
		return 'image/' + r;
	};
	imgData = imgData.replace(_fixType(type),'image/octet-stream');
	var saveFile = function(data, filename){
		var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
		save_link.href = data;
		save_link.download = filename;
	
		var event = document.createEvent('MouseEvents');
		event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
		save_link.dispatchEvent(event);
	};
	var filename = shopname + '.' + type;
	saveFile(imgData,filename);
});

這是什麼編輯器真的不好用，編輯出來的都是什麼格式！重新弄了無數次！！！