Html2canvas是一个众所周知的从浏览器页面截图的开源库，使用简单，功能强大。这

将代码转换为图片以供使用

Html2canvas是一个众所周知的从浏览器页面截图的开源库，使用简单，功能强大。

使用html2canvas

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

在实际使用中，有两点需要注意：

1.html2canvas通过分析元素的实际样式生成画布图片内容，因此需要元素的实际布局和可视化显示。如果您想要一个完整的屏幕截图，更好将元素从文档流中分离出来(例如，位置：)

2.默认生成的画布图像在视网膜设备上非常模糊，可以通过将其处理成2倍图像来解决：

varw=$('#code ')。width()；

varh=$('#code ')。height()；//将画布的宽度和高度设置为容器宽度和高度的两倍

var canvas=document . CreateElement(' canvas ')；

canvas . width=w * 2；

canvas . height=h * 2；

canvas . style . width=w ' px '；

canvas . style . height=h ' px '；

var context=canvas . GetContext(' 2d ')；//然后缩放画布，将图像放大两倍，在画布上绘制

context.scale(2，2)；

html 2 canvas(document . query selector(' # code ')，{

canvas:canvas，

onrendered:function函数(画布)

{ .

}

});

使用html2canvas的实际案例

1.html代码结构

section class=' share _ popup ' id=' html 2 canvas '

phtml2canvas的使用非常简单，只需传入一个DOM元素，然后通过回调得到canvas/p即可

pimgsrc='1.jpg'/p

phtml2canvas的使用非常简单，只需传入一个DOM元素，然后通过回调得到canvas/p即可

/section

2.js代码结构

var str=$(' # html 2 canvas ')；

//console . log(str)；

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

onrendered : function(canvas){

var image=canvas . TotaToul(' image/png ')；

varpHtml=' img src=' image '/'；

$('#html2canvas ')。html(PhtML)；

}

});