H5頁面中使用html5-canvas總結(jié)

html5canvas 插件實(shí)現(xiàn)的功能是，將dom節(jié)點(diǎn)的內(nèi)容復(fù)制到一個(gè)動(dòng)態(tài)創(chuàng)建的<canvas>中，而通過 canvas 對(duì)象就可以很方便地將畫布的內(nèi)容轉(zhuǎn)成圖片。

github直達(dá)：html2canvas

使用方式

html2canvas(domNode, options).then(function(canvas){
    var img = document.createElement('img');
    img.src = canvas.toDataURL();
    // 成功將原生domNode轉(zhuǎn)成img
});

在H5頁面中使用

<script src="js/html2canvas.min.js"></script>
// var domNode = document.getElementById('xxId');
html2canvas(domNode, {
    width: Math.floor(domNode.clientWidth),
    height: Math.floor(domNode.clientHeight),
    scale: 2
}).then(function(canvas) {
    //console.log(canvas);
    //document.body.appendChild(canvas);
    var img = document.createElement('img');
    img.src = canvas.toDataURL();
    img.setAttribute('id', 'xxxImage');
    // 將img展示到頁面上
    // prependChild(img, domNode);
});

參數(shù)解釋：

• width：指定動(dòng)態(tài)創(chuàng)建的 canvas 的 style 寬度，建議和 domNode 的實(shí)際寬度一致；
• height: 指定動(dòng)態(tài)創(chuàng)建的 canvas 的 style 高度，建議和 domNode 的實(shí)際高度一致；
• scale: 縮放比，筆者建議設(shè)置為2，這樣相當(dāng)于將 canvas 畫布的繪圖寬度/高度擴(kuò)大為style寬度/高度的2倍。這樣繪制出來的圖片比較清晰，避免出現(xiàn)模糊的問題。

注意事項(xiàng)

1、實(shí)測(cè)IOS上出現(xiàn)調(diào)用 html5canvas 無反應(yīng)，Android 機(jī)型正常。

2、domNode 中所有圖片使用<img>標(biāo)簽引入，不要用 background-image 方式。否則可能圖片不清晰。

3、跨域圖片不顯示的問題，增加配置參數(shù){ allowTaint: true, useCORS: true }。

4、png 圖片透明度丟失的問題，增加配置參數(shù){ backgroundColor: "transparent" }。

5、不要使用<br/>標(biāo)簽進(jìn)行文字換行，使用<p>或<div>標(biāo)簽改寫。

6、生成部分圖片的問題，可能是調(diào)用 html5canvas 方法的時(shí)候，domNode 節(jié)點(diǎn)本身還沒有渲染完畢（比如 domNode 節(jié)點(diǎn)本身正在參與一個(gè) zoom 動(dòng)效），加個(gè)適當(dāng)?shù)难訒r(shí)即可。

7、生成圖片底部有留白的問題，這個(gè)是 domNode 中圖片底部本身就有留白，設(shè)置圖片樣式 display:block/inline-block 即可。