首页问答社区 web技术正文

js把html转换成图片格式的方法

2021-02-22 07:36:03 162 0

这篇文章主要介绍js把html转换成图片格式的方法，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

js把html转换成图片格式的方法：首先利用html2canvas把html转换成canvas；然后利用canvas对象方法【toDataURL()】把canvas转换成图片。

js把html转换成图片格式的方法：

1、首先利用html2canvas把html转换成canvas

html2canvas($('#content'),{
onrendered:function(canvas){
document.body.appendChild(canvas);
}
})

2、利用canvas对象方法:toDataURL()把canvas转换成图片

functionconvertCanvasToImage(canvas){
varimage=newImage();
image.src=canvas.toDataURL("image/png");
returnimage;
}

得到的数据格式为：data:image/png;base64…

完整代码如下：

<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>Document</title>
<scriptsrc="jquery.min.js"></script>
<scriptsrc="html2canvas.js"></script>
</head>
<body>
<divid="content"style="width:150px;height:150px;border:1pxsolidblue;">
<span>HelloWorld!</span>
<br>
<span><h3>Areyouhearme?</h3></span>
</div>
<buttonid="btnSave">save</button>
<script>
$(function(){
$('#btnSave').click(function(event){
html2canvas($('#content'),{
onrendered:function(canvas){
document.body.appendChild(canvas);
convertCanvasToImage(canvas);
}
})
});
functionconvertCanvasToImage(canvas){
varimage=newImage();
image.src=canvas.toDataURL("image/png");
document.body.appendChild(image);
returnimage;
}
})
</script>
</body>
</html>

以上是“js把html转换成图片格式的方法”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注恰卡编程网行业资讯频道！