小编给大家分享一下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
});<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”有了一定的了解，如果想了解更多相关知识，欢迎关注亿速云行业资讯频道，感谢各位的阅读！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
