網頁保存爲圖片及高清截圖的優化 | canvas跨域圖片配置

本次技術調研來源於H5項目中的一個重要功能需求：實現微信長按網頁保存爲截圖。

這裏有個栗子（請用微信打開，長按圖片便可保存）：3分鐘探索你的知識邊界

將整個網頁保存爲圖片是一個十分有趣的功能，常見於H5活動頁的結尾頁分享。如下則是項目中調研和踩坑的一些小結和彙總。

---

1、實現HTML網頁保存爲圖片

1.1 已知可行方案

現有已知可以實現網頁保存爲圖片的方案包括：

• 方案1：將DOM改寫爲canvas，而後利用canvas的toDataURL方法實現將DOM輸出爲包含圖片展現的data URI
• 方案2：使用html2canvas.js實現（可選搭配Canvas2Image.js實現網頁保存爲圖片）
• 方案3：使用rasterizeHTML.js實現

1.2 解決方案的選擇

• 方案1：須要手動計算每一個DOM元素的Computed Style，而後須要計算好元素在canvas的大小位置等屬性。

  方案1難點：

  1. 至關於徹底重寫了整個頁面的佈局樣式，增長了工做量。
  2. 因爲canvas中是沒有的對象概念，對於元素豐富、佈局複雜的頁面，不易重構
  3. 全部DOM元素改寫進canvas會帶來一些困難，例如：難以支持響應式，圖片元素清晰度不佳和文字點擊區域識別問題等。
• 方案2：該類功能中Github上stars最多(至今仍在維護)，Stack Overflow亦有豐富的討論。只需簡單調用html2canvas方法並設定配置項便可。
• 方案3：該方案的限制較多，目前僅支持3類可轉爲canvas的目標格式: 頁面url，html字符串和document對象。

小結: html2canvas是目前實現網頁保存爲圖片功能的綜合最佳選擇。

1.3 html2canvas的使用方法

官方GitHub：https://github.com/niklasvh/h...

如下描述針對html2canvas版本是0.5.0-beta4

1.3.1 實現保存爲圖片的第一步：html轉爲canvas

基於html2canvas.js可將一個元素渲染爲canvas，只須要簡單的調用html2canvas(element[, options]);便可。下列html2canvas方法會返回一個包含有<canvas>元素的promise：

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

1.3.2 實現保存爲圖片的第二步：canvas轉image

上一步生成的canvas即爲包含目標元素的<canvas>元素對象。實現保存圖片的目標只須要將canvas轉image便可。

這裏的轉換方案有2種：

• 方案1：基於原生canvas的toDataURL方法將canvas輸出爲data: URI類型的圖片地址，再將該圖片地址賦值給<image>元素的src屬性便可

MDN:toDataURL() API 詳解

• 方案2：使用第三方庫Canvas2Image.js，調用其convertToImage方法便可（GitHub）

實際上，Canvas2Image.js也是基於canvas.toDataURL的封裝，相比原生的canvas API對於轉爲圖片的功能上考慮更爲具體(未壓縮的包大小爲7.4KB)，適合項目使用。

2、實現高清截圖的優化方案

2.1 基礎的清晰截圖優化方案

最終圖片的清晰度取決於第一步中html轉換成的canvas的清晰度。

現有解決方案參考；

• html5 canvas在高倍屏下變模糊的處理辦法
• html5 canvas繪製圖片模糊的問題

其基本原理爲：
將canvas的屬性width和height屬性放大爲2倍（或者設置爲devicePixelRatio倍），最後將canvas的CSS樣式width和height設置爲原先1倍的大小。

例如：但願在html中實際顯示的<canvas>寬高分別爲160px,90px則可做以下設置

<canvas width="320" height="180" style="width:160px;height:90px;"></canvas>

參考上述文檔具體的使用案例以下；

convert2canvas() {

    var shareContent = YourTargetElem; 
    var width = shareContent.offsetWidth; 
    var height = shareContent.offsetHeight; 
    var canvas = document.createElement("canvas"); 
    var scale = 2; 

    canvas.width = width * scale; 
    canvas.height = height * scale; 
    canvas.getContext("2d").scale(scale, scale); 

    var opts = {
        scale: scale, 
        canvas: canvas, 
        logging: true, 
        width: width, 
        height: height 
    };
    html2canvas(shareContent, opts).then(function (canvas) {
        var context = canvas.getContext('2d');

        var img = Canvas2Image.convertToImage(canvas, canvas.width, canvas.height);

        document.body.appendChild(img);
        $(img).css({
            "width": canvas.width / 2 + "px",
            "height": canvas.height / 2 + "px",
        })
    });
}

2.2 進階的清晰截圖優化方案

上述設置能夠解決一般的截圖效果不清晰問題，不過探索還遠沒有結束。

實際在咱們的項目中，即便做出2.1節的設置後，模糊成大果粒的渲染結果依然給清晰的幻想打了0分。

下面直接給出3條進一步的優化策略：

1. 更改百分比佈局爲px佈局（若是原先是百分比佈局的話）
2. 關閉canvas默認的抗鋸齒設置
3. 設置模糊元素的width和height爲素材原有寬高，而後經過transform: scale進行縮放。這裏scale的數值由具體需求決定。

基本原理

1. 若是原來使用百分比設置元素寬高，請更改成px爲單位的寬高，避免樣式二次計算致使的模糊
2. 默認狀況下，canvas的抗鋸齒是開啓的，須要關閉抗鋸齒來實現圖像的銳化(MDN: imageSmoothingEnabled )
3. 除了canvas能夠經過擴大2倍寬高而後縮放至原有寬高來提升清晰度，對於DOM中其餘的元素也可使用css樣式的scale來實現一樣的縮放

例: html2canvas配置

convert2canvas() {

    var cntElem = $('#j-sec-end')[0];

    var shareContent = cntElem;//須要截圖的包裹的（原生的）DOM 對象
    var width = shareContent.offsetWidth; //獲取dom 寬度
    var height = shareContent.offsetHeight; //獲取dom 高度
    var canvas = document.createElement("canvas"); //建立一個canvas節點
    var scale = 2; //定義任意放大倍數 支持小數
    canvas.width = width * scale; //定義canvas 寬度 * 縮放
    canvas.height = height * scale; //定義canvas高度 *縮放
    canvas.getContext("2d").scale(scale, scale); //獲取context,設置scale 
    var opts = {
        scale: scale, // 添加的scale 參數
        canvas: canvas, //自定義 canvas
        // logging: true, //日誌開關，便於查看html2canvas的內部執行流程
        width: width, //dom 原始寬度
        height: height,
        useCORS: true
    };

    html2canvas(shareContent, opts).then(function (canvas) {

        var context = canvas.getContext('2d');
        context.mozImageSmoothingEnabled = false;
        context.webkitImageSmoothingEnabled = false;
        context.msImageSmoothingEnabled = false;
        context.imageSmoothingEnabled = false;

        var img = Canvas2Image.convertToJPEG(canvas, canvas.width, canvas.height);

        document.body.appendChild(img);

        $(img).css({
            "width": canvas.width / 2 + "px",
            "height": canvas.height / 2 + "px",
            // 'border': '10px solid #000'
        }).addClass('f-full');

        $('#j-sec-end').remove();
    });
}

例: DOM元素樣式：

.targetElem {width: 54px;height: 142px;margin-top:2px;margin-left:17px;transform: scale(0.5)}

<!--## 2.3 優化結果對比
（mac中有截圖，能夠對比）-->

3、含有跨域圖片的配置

因爲canvas對於圖片資源的同源限制，若是畫布中包含跨域的圖片資源則會污染畫布，形成生成圖片樣式混亂或者html2canvas方法不執行等問題。

如下主要解決兩類跨域的圖片資源：包括已配置過CORS的CDN中的圖片資源和微信用戶頭像圖片資源。

3.1 針對CDN中的圖片的配置

1. 要求CDN的圖片配置好CORS。CDN配置好後，經過chrome開發者工具能夠看到響應頭中應含有Access-Control-Allow-Origin的字段。
2. 開啓html2canvas的useCORS配置項。即做以下設置：


useCORS: true
}
html2canvas(element, options);

注意：
若是沒有開啓html2canvas的useCORS配置項，html2canvas會正常執行且不會報錯，可是不會輸出對應的CDN圖片
（即在同一頁面中，可測試同時包含CDN的圖片和本地圖片的資源的頁面，可是隻有本地圖片可以被正常渲染出來）

3.2 針對微信用戶頭像的配置

若是須要將微信平臺中的用戶頭像一併保存爲圖片，3.1的方案無能爲力。可經過配置代理轉發實現，此處不贅述。

其餘注意事項

(1) margin的遮擋問題

微信中，喚出長按保存圖片的菜單要求長按的對象直接是<image>元素，若是<image>元素上方存在遮擋，則不會喚出菜單。
而事實上，引起遮擋的並不僅是非<image>元素，還多是margin屬性。例如：若在頁面底部，對一個絕對定位的元素設置了數值很大的margin-top，則margin-top所涉及的區域，均沒法長按喚出菜單。解決方案：將margin-top改用爲top便可。

(2) 安卓版微信保存圖片失敗的問題

canvas2img默認保存圖片的格式爲png，而在安卓版微信中所生成的圖片儘管能長按喚出保存圖片的菜單，可是沒法正確保存到本地相冊。 解決方案：設置canvas2img的生成圖片格式配置項爲jpeg便可。

(3) JPEG的黑屏問題

設置canvas2img輸出格式爲jpeg，會有必定概率致使生成的圖片包含大量的黑色塊。可能的解決方案：減少圖片元素的體積大小和背景圖片的尺寸大小。

(4) 不能保留動效

在圖片的轉化前，必須中止或者刪除動效後才能正確渲染出圖片，不然生成的圖片是破裂的。

參考文獻

• CanvasRenderingContext2D.drawImage()
• Add dpi/scale options for custom resolution
• html5 canvas在高倍屏下變模糊的處理辦法
• Canvas實現保存圖片到本地
• html2canvas截圖如何解決跨域的問題