html2canvas截圖 圖片另存並解決圖片模糊問題

最近由於公司業務要求，需要完成一個HTML頁面效果渲染後生成照片的功能，功能的核心是把HTML代碼展現的內容轉化爲png或者jpg圖片。接到這個任務的時候，我心裏是一臉懵逼的，於是就上谷歌搜索插件，還真有一款名叫html2canvas的插件，我心想看來這任務還是挺簡單的，那開始吧！

html2canvas

運行腳本，可以直接在用戶瀏覽器上拍攝網頁或其部分的“截圖”。截圖是基於DOM，因此並不是100％準確的真實表示，因爲它是實際的截圖，而是根據頁面上可用的信息構建截圖。（引用自html2canvas官網）

入門

html2canvas的簡單調用：

// element是需要截圖的元素
html2canvas（element，options）;

可用選項（options）

參數名稱	類型	默認值	描述
allowTaint	boolean	false	允許跨域
useCORS	boolean	false	貌似與跨域有關，但和allowTaint不能共存
proxy	string	undefined	代理地址
taintTest	boolean	true	是否在渲染前測試圖片
timeout	number	0	圖片加載延遲，默認延遲爲0，單位毫秒
logging	boolean	false	在Console中輸出信息
width	number	null	canvas的寬度設定
height	number	null	canvas的高度設定
background	string	#fff	canvas的背景顏色（未指定則爲透明）
letterRendering	boolean	false	在設置了字間距的時候有用

特別的是，html2canvas提供了回調事件--onrendered來渲染canvas：

html2canvas（element，{ 
    onrendered：function（canvas）{ 
        // canvas是最終渲染的<canvas>元素
    } 
}）;

html2canvas(document.getElementById('view')).then(function(canvas) {
                                                    var myImage4 = canvas.toDataURL("image/jpeg",1.0);
                                                    //並將圖片上傳到服務器用作圖片分享
                                                    var fileName4 = "ws_" + $("#period").val()+'_shouji';
                                                    $.ajax({
                                                        type : "POST",
                                                        url : ctx+'/portal/upload',
                                                        data : {data:myImage4,fileNAme:fileName4},
                                                        timeout : 60000,
                                                        success : function(data){
                                                            alert("靜態資源文件生成完畢！");
                                                            mini.unmask(document.body);
                                                        }
                                                    });
                                                });

最原始效果圖找不到了，放一張稍微有點對比性的吧，最原始截出來文字發虛，模糊度文字無法敘述：

html2canvas提供了scale屬性可調整清晰度：

優化後效果圖：

參數用法介紹：

參數名稱	類型	默認值	描述
scale	number	1	按比例增加分辨率 (2=雙倍).
dpi	number	96	將分辨率提高到特定的DPI（每英寸點數）

html2canvas.js