介绍
这篇文章给大家分享的是有关怎么利用html2canvas将html代码转为图片的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。
html2canvas,这是一个非常著名的从浏览器网页截图的开源库,使用很方便,功能也很强大。这
<强>转换代码到图片使用强>
html2canvas,这是一个非常著名的从浏览器网页截图的开源库,使用很方便,功能也很强大。
<强>使用html2canvas 强>
html2canvas的使用非常简单,简单到只需要传入一个DOM元素,然后通过回调拿到画布:
<强>在实际使用的时候,有两个注意点:强>
1。html2canvas通过解析元素实际的样式来生成画布图片内容,因此它对元素实际的布局和视觉显示有要求。如果要完整截的图,最好将元素从文档流中独立出来(例如位置:绝对)
2。默认生成的帆布图片在视网膜设备上显示很模糊,处理成2倍图能解决这个问题:
w=$ var (“# code") .width (); var h=$ (“# code") .height();//要将画布的宽高设置成容器宽高的2倍 画布var=document.createElement (“canvas"); 画布。宽度=w * 2; 画布。身高=h * 2; canvas.style。宽度=w +“px"; canvas.style。身高=h +“px"; var=canvas.getContext上下文(“2 d");//然后将画布缩放,将图像放大两倍画到画布上 context.scale (2, 2); html2canvas (document.querySelector (“# code") { 帆布:帆布,> & lt;部分类=皊hare_popup"id=癶tml2canvas"比; & lt; p> html2canvas的使用非常简单,简单到只需要传入一个DOM元素,然后通过回调拿到canvas https://www.yisu.com/zixun/& lt; p> & lt; img src=" 1. jpg ">html2canvas的使用非常简单,简单到只需要传入一个DOM元素,然后通过回调拿到画布
节>
2。js代码结构
怎么利用html2canvas将html代码转为图片