这篇文章主要介绍js把html转换成图片格式的方法，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！js把html转换成图片格式的方法：首先利用html2canvas把html转换成canvas；然后利用canvas对象
这篇文章主要介绍js把html转换成图片格式的方法，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
js把html转换成图片格式的方法：首先利用html2canvas把html转换成canvas；然后利用canvas对象方法【toDataURL()】把canvas转换成图片。
js把html转换成图片格式的方法：
首先利用html2canvas把html转换成canvas
html2canvas($('#content'),{ onrendered: function(canvas) { document.body.appendChild(canvas); }})利用canvas对象方法:toDataURL()把canvas转换成图片
function convertCanvasToImage(canvas) { var image = new Image(); image.src = canvas.toDataURL("image/png"); return image;}得到的数据格式为：data:image/png;base64…
完整代码如下：
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title> <script src="Jquery.min.js"></script> <script src="html2canvas.js"></script></head><body> <div id="content" style="width:150px;height:150px;border:1px solid blue;"> <span>Hello World!</span> <br> <span><h3>Are you hear me?</h3></span> </div> <button id="btnSave">save</button><script>$(function(){ $('#btnSave').click(function(event) { html2canvas($('#content'),{ onrendered: function(canvas) { document.body.appendChild(canvas); convertCanvasToImage(canvas); } }) }); function convertCanvasToImage(canvas) { var image = new Image(); image.src = canvas.toDataURL("image/png"); document.body.appendChild(image); return image; }})</script></body></html>以上是“js把html转换成图片格式的方法”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注编程网精选频道！
--结束END--
本文标题: js把html转换成图片格式的方法
本文链接: https://www.lsjlt.com/news/246522.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-05-03
2024-05-03
2024-05-03
2024-05-03
2024-05-03
2024-05-03
2024-05-03
2024-05-03
2024-05-03
2024-05-03
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0