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 即可。