H5页面中使用html2canvas总结

H5页面中使用html2canvas总结

html2canvas插件实现的功能是，将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倍。这样绘制出来的图片比较清晰，避免出现模糊的问题。对图片质量要求更高的话可以设置为4。

注意事项

1、实测IOS上出现调用html2canvas无反应，Android机型正常。

解决办法：使用更低的发布版本，比如v1.0.0-rc.4

2、domNode中所有图片使用<img>标签引入，不要用background-image方式。否则可能图片不清晰。

3、跨域图片不显示的问题，增加配置参数{ allowTaint: true, useCORS: true }。

4、png图片透明度丢失的问题，增加配置参数{ backgroundColor: "transparent" }。

5、不要使用<br/>标签进行文字换行，使用<p>或<div>标签改写。

6、生成部分图片的问题，可能是调用html2canvas方法的时候，domNode节点本身还没有渲染完毕（比如domNode节点本身正在参与一个zoom动效），加个适当的延时即可。

7、生成图片底部有留白的问题，这个是domNode中图片底部本身就有留白，设置图片样式display:block/inline-block即可。

8、经验（重要）：若出现部分dom节点没有渲染到canvas（比如出现空白）的问题，多半是相应dom节点的样式不被支持，尝试调整样式看看能否正常渲染。