domtoimage -- html轉化爲圖片

html轉化爲圖片

前言

這段時間的工作中，一直在做canvas類的H5，開發的過程中很關鍵的一部分是將dom節點轉化爲圖片。起初是用html2canvas來做的，做完之後感覺圖片清晰度的效果不是很好，然後就再GitHub上找到 domtoimage這個js插件換了之前html2canvas。更換後不僅清晰度有所提高，能夠支持的圖片格式和dom節點樣式也比html2canvas要多。

簡潔的domtoimage

domtoimage 主要代碼才700多行，方法和屬性都比較少，下載之後看一下就知道怎麼用，有些什麼功能。雖然html2canvas 代碼3000多行，調用其實也是不難，但相對來說代碼確實比domtoimage多了很多。

domtoimage 主要的方法有：

domtoimage.toPng(...);將節點轉化爲png格式的圖片

var node = document.getElementById('my-node');

domtoimage.toPng(node)
    .then(function (dataUrl) {
        var img = new Image();
        img.src = dataUrl;
        document.body.appendChild(img);
    })
    .catch(function (error) {
        console.error('oops, something went wrong!', error);
    });

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

domtoimage.toJpeg(...);將節點轉化爲jpg格式的圖片

domtoimage.toJpeg(document.getElementById('my-node'), { quality: 0.95 })
    .then(function (dataUrl) {
        var link = document.createElement('a');
        link.download = 'my-image-name.jpeg';
        link.href = dataUrl;
        link.click();
    });

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

domtoimage.toSvg(...);將節點轉化爲svg格式的圖片，生成的圖片的格式都是base64格式。

function filter (node) {
    return (node.tagName !== 'i');
}

domtoimage.toSvg(document.getElementById('my-node'), {filter: filter})
    .then(function (dataUrl) {
        /* do something */
    });

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

domtoimage.toBlob(...);將節點轉化爲二進制格式，這個可以直接將圖片下載，是不是非常方便

domtoimage.toBlob(document.getElementById('my-node'))
    .then(function (blob) {
        window.saveAs(blob, 'my-node.png');
    });

• 1
• 2
• 3
• 4
• 5

domtoimage.toPixelData(...);獲取原始像素值，以Uint8Array 數組的形式返回，每4個數組元素表示一個像素點，即rgba值。這個方法也是挺實用的，可以用於WebGL中編寫着色器顏色。

var node = document.getElementById('my-node');

domtoimage.toPixelData(node)
    .then(function (pixels) {
        for (var y = 0; y < node.scrollHeight;   y) {
          for (var x = 0; x < node.scrollWidth;   x) {
            pixelAtXYOffset = (4 * y * node.scrollHeight)   (4 * x);
            /* pixelAtXY is a Uint8Array[4] containing RGBA values of the pixel at (x, y) in the range 0..255 */
            pixelAtXY = pixels.slice(pixelAtXYOffset, pixelAtXYOffset   4);
          }
        }
    });

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

domtoimage 主要的屬性有：

filter ： 過濾器節點中默寫不需要的節點；

bgcolor ： 圖片背景顏色；

height, width ： 圖片寬高；

style ：傳入節點的樣式，可以是任何有效的樣式；

quality ： 圖片的質量，也就是清晰度；

cacheBust ： 將時間戳加入到圖片的url中，相當於添加新的圖片；

imagePlaceholder ： 圖片生成失敗時，在圖片上面的提示，相當於img標籤的alt；

上面的這些摘自 GitHub

domtoimage 和html2canvas 對比

兼容更多的樣式和標籤

在我做的那個H5中，節點不僅包含有漸變，濾鏡，陰影等比較難渲染的樣式，還包含有各種svg標籤，同時svg具有描邊和填充等屬性。

 

 

 

dome

兩者都是直接調用藉口沒進行任何處理，通過對比可以看出，domtoimage比html2canvas多了能夠兼容濾鏡，陰影（box-shadow）等樣式，能夠更好的支持svg。

生成的圖片比較清晰

同樣用最簡單的方法調用兩個方法生成圖片，能夠看得出通過domtoimage生成出來的圖片明顯的比html2canvas要清晰很多

 

 

 

稍微放大後對比，就能非常清楚的看出差別

 

 

 

dome

domtoimage不足點

domtoimage也不是所有的樣式都能夠兼容，到目前爲止我發現的兼容不了的屬性有，圖形遮罩mask-box-image，和svg 的陰影drop-shadow。因爲項目所需，所自己處理了圖形遮罩的兼容問題，而svg陰影drop-shadow，實在是有點難度，暫時也就放置了。圖形遮罩的兼容代碼在下面第二個dome中。這裏就不多講了

dome 直接用domtoimage 無法正常生存圖片

dome 後期處理後可生存圖片

總結

domtoimage 性能還是很不錯，優於html2canvas，代碼少，性能高，應用簡單。

如果有其他好用的插件，或編寫有錯的地方歡迎留言賜教，謝謝！