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节点的样式不被支持,尝试调整样式看看能否正常渲染。