html2canvas可以通過純JS對瀏覽器端進行截圖，但截圖的精確度還有待提高，部分css不可識別，所以在canvas中不能完美呈現原畫面樣式

外掛地址

• 官方網站：html2canvas

• Github：html2canvas

  這裡有個坑，不要下載最高版本的js，有很多坑。我從1.0降下來了。我用的是0.5版本的

• 這個是我在用的0.5版本: html2canvas.min.js

• 這個是我已經做好了，下載過去參考參考html2canvas加上canvas2image儲存網頁為圖片

版本號

在介紹這個外掛前先科普一下軟體的版本號.

• Alpha：是內部測試版,一般不向外部發布,會有很多Bug.一般只有測試人員使用。
• Beta：也是測試版，這個階段的版本會一直加入新的功能。在Alpha版之後推出。
• α、β、λ常用來表示軟體測試過程中的三個階段，α是第一階段，一般只供內部測試使用；β是第二個階段，已經消除了軟體中大部分的不完善之處，但仍有可能還存在缺陷和漏洞，一般只提供給特定的使用者群來測試使用；λ是第三個階段，此時產品已經相當成熟，只需在個別地方再做進一步的優化處理即可上市發行。

支援的瀏覽器

• Firefox 3.5+
• Google Chrome
• Opera 12+
• IE9+
• Safari 6+

貼上程式碼

html程式碼結構

<h2 onclick="aa();">點選複製圖片</h2>
<h2 onclick="bb();">點選下載圖片</h2>



<div id="capture" style="padding: 10px; background: #f5da55">
    <h4 style="color: #000; ">Hello world!</h4>
    <img src="abc.jpg" width="200" height="200"><!-- 圖片只能放在當前伺服器才能用 -->
</div>
 

js程式碼結構

function aa(){

	html2canvas(document.getElementById('capture'), {
        onrendered: function(canvas) {
       		canvas.setAttribute('id','thecanvas');	//新增屬性
            document.body.appendChild(canvas);
        },
        background: "#ffffff",		//canvas的背景顏色，如果沒有設定預設透明
        logging: true,		//在console.log()中輸出資訊
    	width: 300,			//圖片寬
		height: 300,		//圖片高
        useCORS: true， // 【重要】開啟跨域配置
    });
}
	 
function bb(){
	var oCanvas = document.getElementById("thecanvas");

	/* 參考
	Canvas2Image.saveAsPNG(oCanvas);  // 這將會提示使用者儲存PNG圖片
	Canvas2Image.saveAsJPEG(oCanvas); // 這將會提示使用者儲存JPG圖片
	Canvas2Image.saveAsBMP(oCanvas);  // 這將會提示使用者儲存BMP圖片
	// 返回一個包含PNG圖片的<img>元素
	var oImgPNG = Canvas2Image.saveAsPNG(oCanvas, true);   
	// 返回一個包含JPG圖片的<img>元素
	var oImgJPEG = Canvas2Image.saveAsJPEG(oCanvas, true); 
	                                                       
	// 返回一個包含BMP圖片的<img>元素
	var oImgBMP = Canvas2Image.saveAsBMP(oCanvas, true); 
	 
	// 這些函式都可以接受高度和寬度的引數
	// 可以用來調整圖片大小
	// 把畫布儲存成100x100的png格式
	Canvas2Image.saveAsPNG(oCanvas, false, 100, 100);
	*/


	/*自動儲存為png*/
	// 獲取圖片資源
	var img_data1 = Canvas2Image.saveAsPNG(oCanvas, true).getAttribute('src');
	saveFile(img_data1, 'richer.png');
}


// 儲存檔案函式
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);
};

這個外掛幾點的坑

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

  （心裡在想：什麼狗屁外掛根本不管用 圖片都擷取不了）
  原因：程式必須放在伺服器下執行，不然的話網頁中的圖片是出不來的
  html2canvas 只能在伺服器中抓取img

• 2、js的版本問題？

  這個版本必須要用穩定版的，不能用最高的版本，因為那應該是測試版。最好用穩定版的！
  用的版本不對的話，很多功可能用不了。