将代码转换为图片以供使用
Html2canvas是一个众所周知的从浏览器页面截图的开源库，使用简单，功能强大。
使用html2canvas
html2canvas的使用非常简单，简单到只需要传入一个DOM元素，然后通过回调得到画布:
在实际使用中，有两点需要注意:
1.html2canvas通过分析元素的实际样式生成画布图片内容，因此需要元素的实际布局和可视化显示。如果你想要一个完整的截图，最好将元素从文档流中分离出来(例如，位置:绝对)
2.默认生成的画布图像在视网膜设备上非常模糊，可以通过将其处理成2倍图像来解决:
var w = $("#code ")。width()；
var h = $("#code ")。height()；//将画布的宽度和高度设置为容器宽度和高度的两倍
var 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 ")，{
画布:画布，
onrendered:函数(画布)
{ ...
}
});
使用html2canvas的实际案例
1.html代码结构
& ltsection class = " share _ popup " id = " html 2 canvas " gt。
& ltp>。html2canvas的使用非常简单，只需要传入一个DOM元素，然后是画布
<p><img src="1.jpg"></p> & ltp>。& ltimg src="1.jpg">。& lt/p>。
& ltp>。html2canvas的使用非常简单，只需要传入一个DOM元素，然后是画布
& lt/section>。
2.js代码结构
var str = $(' # html 2 canvas ')；
//console . log(str)；
html2canvas([str.get(0)], {
onrendered: function (canvas) {
var image = canvas . TotaToul(" image/png ")；
var pHtml = "<img src="+image+" />"; var pHtml = " & ltimg src = "+image+"/& gt；"；
$('#html2canvas ')。html(PhtML)；
}
});
免费网站建设材料下载:sucaiq.com
如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢各位对物质圈的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！
1.《html2canvas html2canvas 将html代码转为图片的使用方法》援引自互联网，旨在传递更多网络信息知识，仅代表作者本人观点，与本网站无关，侵删请联系页脚下方联系方式。
2.《html2canvas html2canvas 将html代码转为图片的使用方法》仅供读者参考，本网站未对该内容进行证实，对其原创性、真实性、完整性、及时性不作任何保证。
3.文章转载时请保留本站内容来源地址，https://www.lu-xu.com/caijing/1566056.html
