html2canvas下载图片,html2canvas 图片空白

　　前言

　　最近由于公司业务要求，需要完成一个一键生成照片图片打印总图的功能

　　html2canvas是一个非常强大的截图插件，很多生成图片和打印的场景会用到它

　　但是效果很模糊，本文主要记录一下如果解决模糊的问题以及各种参数如何设置

　　基本用法处理模糊问题细节问题-压缩base64，导出处理基本用法

　　window.html2canvas(dom，{ scale: scale，width: dom.offsetWidth，height: dom.offsetHeight }).然后(function(canvas){ var context=canvas。获取上下文(“2d”)；语境。moziimagesmoothingenabled=false；语境。webkitimagesmoothingenabled=false；语境。msimagesmoothingenabled=false语境。imagesmoothingenabled=falsevar src 64=画布。toda taurl()}量表为放大倍数，我这里设置为4 ,越高理论上越清晰

　　高度：dom.offsetHeight直接取得需要转为图片的数字正射影像图元素的宽高

　　处理模糊问题

　　var context=画布。获取上下文(“2d”)；语境。moziimagesmoothingenabled=false；语境。webkitimagesmoothingenabled=false；语境。msimagesmoothingenabled=false语境。imagesmoothingenabled=false这段代码去除锯齿，会使图片变得清晰，结合规模放大处理

　　细节问题

　　如果生成的base64太大，会损耗性能，需要压缩base64

　　首先可能需要获取base64的大小

　　getImgSize: function (str) { //获取base64图片大小，返回千字节数字var str=str。替换( data:image/JPEG；base64，， )；//这里根据自己上传图片的格式进行相应修改var strLength=str.lengthvar文件长度=parse int(strLength-(strLength/8)* 2)；//由字节转换为千字节变量大小="";大小=(文件长度/1024)。toFixed(2)；返回parse int(size)；}然后根据获取的大小判断你是否要压缩base64

　　压缩的代码如下

　　compress: function (base64String，w，quality){ var getmime type=function(URL数据){ var arr=URL数据。拆分(，)；var mime=arr[0].匹配(/:(。*?);/)[1];//返回mime.replace(image/， )；返回mime }；var新图像=新图像()；var imgWidth，imgHeightvar Promise=new Promise(function(resolve){新图像。onload=resolve});新形象。src=base64字符串；回报承诺。然后(function(){ img width=新图像。宽度；img高度=新图像。身高；var canvas=文档。createelement(“canvas”)；var CTX=画布。获取上下文(“2d”)；if (Math.max(imgWidth，img height)w){ if(img width img height){ canvas。宽度=w；画布。高度=w * img高度/img宽度；} else {画布。高度=w；画布。宽度=w * img宽度/img高度；} } else { canvas.width=imgwidthcanvas . height=img height } CTX . clear rect(0，0，canvas . width，canvas。身高)；ctx.drawImage(newImage，0，0，canvas.width，canvas。身高)；var base64=画布。toda taurl(getMimeType(base64 string)，质量)；返回base64})}使用方法

　　自压缩(src64，宽度，1)。然后(function(base){ src 64=base src 64=src 64。替换(/data:image \/).*;base64，/， )//调用接口保存图片}).catch(function(err){对话框。提示(呃。消息，对话.消息。警告)；})本文主要包括，html2canvas使用，参数，如何保证图片的清晰度和base64的一下处理

　　以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

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

相关文章阅读