html2canvas，这是一个非常著名的从浏览器网页截图的开源库，使用很方便，功能也很强大。这

 

　　转换代码到图片使用

 

　　html2canvas，这是一个非常著名的从浏览器网页截图的开源库，使用很方便，功能也很强大。

 

　　使用html2canvas

 

　　html2canvas的使用非常简单，简单到只需要传入一个DOM元素，然后通过回调拿到canvas：

 

　　在实际使用的时候，有两个注意点：

 

　　1.html2canvas通过解析元素实际的样式来生成canvas图片内容，因此它对元素实际的布局和视觉显示有要求。如果要完整截图，最好将元素从文档流中独立出来（例如position:absolute）

 

　　2.默认生成的canvas图片在retina设备上显示很模糊，处理成2倍图能解决这个问题：

 

　　

 

　　varw=$("#code").width();

 

　　varh=$("#code").height();//要将canvas的宽高设置成容器宽高的2倍

 

　　varcanvas=document.createElement("canvas");

 

　　canvas.width=w*2;

 

　　canvas.height=h*2;

 

　　canvas.style.width=w+"px";

 

　　canvas.style.height=h+"px";

 

　　varcontext=canvas.getContext("2d");//然后将画布缩放，将图像放大两倍画到画布上

 

　　context.scale(2,2);

 

　　html2canvas(document.querySelector("#code"),{

 

　　canvas:canvas,

 

　　onrendered:function(canvas)

 

　　{...

 

　　}

 

　　});

 

　　使用html2canvas的实际案例

 

　　1.html代码结构

 

　　<sectionclass="share_popup"id="html2canvas">

 

　　<p>html2canvas的使用非常简单，简单到只需要传入一个DOM元素，然后通过回调拿到canvas</p>

 

　　<p><imgsrc="1.jpg"></p>

 

　　<p>html2canvas的使用非常简单，简单到只需要传入一个DOM元素，然后通过回调拿到canvas</p>

 

　　</section>

 

　　2.js代码结构

 

　　varstr=$('#html2canvas');

 

　　//console.log(str);

 

　　html2canvas([str.get(0)],{

 

　　onrendered:function(canvas){

 

　　varimage=canvas.toDataURL("image/png");

 

　　varpHtml="<imgsrc="+image+"/>";

 

　　$('#html2canvas').html(pHtml);

 

　　}

 

　　});