本文摘自PHP中文网,作者coldplay.xixi,侵删。
js把html转换成图片格式的方法:首先利用html2canvas把html转换成canvas;然后利用canvas对象方法【toDataURL()】把canvas转换成图片。
本教程操作环境:windows7系统、javascript1.8.5版,DELL G3电脑,该方法适用于所有品牌电脑。
js把html转换成图片格式的方法:
1、首先利用html2canvas把html转换成canvas
1 2 3 4 5 | html2canvas($( '#content' ),{
onrendered: function (canvas) {
document.body.appendChild(canvas);
}
})
|
2、利用canvas对象方法:toDataURL()把canvas转换成图片
1 2 3 4 5 | function convertCanvasToImage(canvas) {
var image = new Image();
image.src = canvas.toDataURL( "image/png" );
return image;
}
|
得到的数据格式为:data:image/png;base64…
完整代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <!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><h2>Are you hear me?</h2></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>
|
相关免费学习推荐:javascript视频教程
以上就是js如何把html转换成图片格式的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
javascript怎么移除dom元素
javascript中的let是什么
手把手带你弄懂javascript中的异步编程
javascript输出方式有哪些
必备的12个javascript技巧
javascript的技术特性是什么
javascript怎么判断是否为null
使用webpack构建多页应用的代码示例
javascript怎么将字母转为小写
ajax和javascript的区别是什么
更多相关阅读请进入《javascript》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » js如何把html转换成图片格式