H5頁面中如何使用html5-canvas

小編給大家分享一下H5頁面中如何使用html5-canvas，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

H5頁面中使用html5-canvas總結

html5canvas 插件實現的功能是，將dom節點的內容復制到一個動態創建的<canvas>中，而通過 canvas 對象就可以很方便地將畫布的內容轉成圖片。

github直達：html2canvas

使用方式

html2canvas(domNode, options).then(function(canvas){
    var img = document.createElement('img');
    img.src = canvas.toDataURL();
    // 成功將原生domNode轉成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);
});

參數解釋：

• width：指定動態創建的 canvas 的 style 寬度，建議和 domNode 的實際寬度一致；

• height: 指定動態創建的 canvas 的 style 高度，建議和 domNode 的實際高度一致；

• scale: 縮放比，筆者建議設置為2，這樣相當于將 canvas 畫布的繪圖寬度/高度擴大為style寬度/高度的2倍。這樣繪制出來的圖片比較清晰，避免出現模糊的問題。

注意事項

1、實測IOS上出現調用 html5canvas 無反應，Android 機型正常。

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

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

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

5、不要使用<br/>標簽進行文字換行，使用<p>或<div>標簽改寫。

6、生成部分圖片的問題，可能是調用 html5canvas 方法的時候，domNode 節點本身還沒有渲染完畢（比如 domNode 節點本身正在參與一個 zoom 動效），加個適當的延時即可。

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

看完了這篇文章，相信你對“H5頁面中如何使用html5-canvas”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！