小编给大家分享一下H5页面中如何使用HTML5-canvas,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!H5页面中使用html5-canvas总结html5canvas 插件实现的功能是,将dom节点的内容复制到一个动态
小编给大家分享一下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倍。这样绘制出来的图片比较清晰,避免出现模糊的问题。
实测iOS上出现调用 html5canvas 无反应,Android 机型正常。
domNode 中所有图片使用<img>标签引入,不要用 background-image 方式。否则可能图片不清晰。
跨域图片不显示的问题,增加配置参数{ allowTaint: true, useCORS: true }。
png 图片透明度丢失的问题,增加配置参数{ backgroundColor: "transparent" }。
不要使用<br/>标签进行文字换行,使用<p>或<div>标签改写。
生成部分图片的问题,可能是调用 html5canvas 方法的时候,domNode 节点本身还没有渲染完毕(比如 domNode 节点本身正在参与一个 zoom 动效),加个适当的延时即可。
生成图片底部有留白的问题,这个是 domNode 中图片底部本身就有留白,设置图片样式 display:block/inline-block 即可。
看完了这篇文章,相信你对“H5页面中如何使用html5-canvas”有了一定的了解,如果想了解更多相关知识,欢迎关注编程网精选频道,感谢各位的阅读!
--结束END--
本文标题: H5页面中如何使用html5-canvas
本文链接: https://www.lsjlt.com/news/309385.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0