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);
});
複制代碼
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();
});
複制代碼
domtoimage.toSvg(...);将節點轉化為svg格式的圖檔，生成的圖檔的格式都是base64格式。
function filter (node){
return (node.tagName !== 'i');
}
domtoimage.toSvg(document.getElementById('my-node'), {filter: filter})
.then(function (dataUrl){
});
複制代碼
domtoimage.toBlob(...);将節點轉化為二進制格式，這個可以直接将圖檔下載下傳，是不是非常友善
domtoimage.toBlob(document.getElementById('my-node'))
.then(function (blob){
window.saveAs(blob, 'my-node.png');
});
複制代碼
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 = pixels.slice(pixelAtXYOffset, pixelAtXYOffset + 4);
}
}
});
複制代碼
domtoimage 主要的屬性有：
filter ： 過濾器節點中默寫不需要的節點；
bgcolor ： 圖檔背景顔色；
height, width ： 圖檔寬高；
style ：傳入節點的樣式，可以是任何有效的樣式；
quality ： 圖檔的品質，也就是清晰度；
cacheBust ： 将時間戳加入到圖檔的url中，相當于添加新的圖檔；
imagePlaceholder ： 圖檔生成失敗時，在圖檔上面的提示，相當于img标簽的alt；
domtoimage 和html2canvas 對比
相容更多的樣式和标簽
在我做的那個H5中，節點不僅包含有漸變，濾鏡，陰影等比較難渲染的樣式，還包含有各種svg标簽，同時svg具有描邊和填充等屬性。
兩者都是直接調用借口沒進行任何處理，通過對比可以看出，domtoimage比html2canvas多了能夠相容濾鏡，陰影(box-shadow)等樣式，能夠更好的支援svg。
生成的圖檔比較清晰
同樣用最簡單的方法調用兩個方法生成圖檔，能夠看得出通過domtoimage生成出來的圖檔明顯的比html2canvas要清晰很多
稍微放大後對比，就能非常清楚的看出差别
domtoimage不足點
domtoimage也不是所有的樣式都能夠相容，到目前為止我發現的相容不了的屬性有，圖形遮罩mask-box-image，和svg 的陰影drop-shadow。因為項目所需，所自己處理了圖形遮罩的相容問題，而svg陰影drop-shadow，實在是有點難度，暫時也就放置了。圖形遮罩的相容代碼在下面第二個dome中。這裡就不多講了
總結
domtoimage 性能還是很不錯，優于html2canvas，代碼少，性能高，應用簡單。
如果有其他好用的插件，或編寫有錯的地方歡迎留言賜教，謝謝！