html2canvas生成图片空白,canvas生成图片并保存

　　本文介绍了一个html2canvas如何在div中保存高清图片的例子，分享给大家，如下：

　　http://www.bootcdn.cn/(可以搜索html2canvans)

　　1.选择html2canvas版本(此版本可以放大以确保图片清晰)

　　生成的默认画布图像在retina设备上比较模糊，处理成2x图像可以解决这个问题：

　　var w=$(#code )。width()；var h=$(#code )。height()；//将画布的宽度和高度设置为容器var canvas=document . createelement( canvas )的宽度和高度的2倍；canvas . width=w * 2；canvas . height=h * 2；canvas . style . width=w px ；canvas . style . height=h px ；var context=canvas . get context( 2d )；//然后缩放画布，将图像放大两倍并绘制在画布context.scale(2，2)；html 2 canvas(document . query selector( # code )，{ canvas: canvas，onrendered: function(canvas) {.}});下载方法：打开(点击,。“下载”，function(){ $(#mycanvas ).移除();var _height=$( .skinReport’).height()；//滚到顶部$(html，body ).动画({滚动顶部：0 })；如果（确认(是否下载肌肤检测报告？)){ setTimeout(function(){ var canvas=document。createelement( canvas )，w=$(#skinReport ).width()，h=$(#skinReport ).height()；画布。宽度=w * 2；画布。高度=h * 2；画布。风格。宽度=w px画布。风格。高度=h pxvar context=画布。获取上下文(“2d”)；//然后将画布缩放，将图像放大两倍画到画布上context.scale(2，2)；html 2可以vas(文档。getelementbyid( skin report )，{ allowTaint: false，taintTest: true，canvas: canvas，on rendered:function(canvas){ canvas。id=我的画布；画布。风格。display= none文档。身体。appendchild(画布)；//生成base64图片数据img数据=画布。toda taurl(类型)；//var new img=document。createelement(“img”)；//新img。src=数据URL//文档。身体。appendchild(新img)；//控制台。日志(img数据)；var _ fix type=function(type){ type=type。tolowercase().替换(/jpg/i， JPEG )；var r=类型。match(/png JPEG BMP gif/)[0]；return image/ r；};//加工图像数据，替换mime类型img数据=img数据。替换(_ fixType(type)， image/octet-stream )；/** * 在本地进行文件保存* @param {String}数据要保存到本地的图片数据* @param {String}文件名文件名*/var saveFile=function(数据，文件名){ var save _ link=文档。createelementns( http://www。w3。org/1999/XHTML ， a )；save _ link . href=data save _ link . download=file name var event=document。创建事件(“鼠标事件”)；event.initMouseEvent(click ，true，false，window，0，0，0，0，0，false，false，false，false，0，null)；save_link.dispatchEvent(事件);};//下载后的问题名 var filename=aname 肌肤检测报告（新日期())。getTime()。类型；//下载saveFile(imgData，filename)；},宽度：1512,高度：15000 }) }，2500)} else { return；} })以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。