html2 canvas生成清晰的图片实现打印功能
程序员文章站
2022-07-01 20:30:27
html2canvas是一个非常强大的截图插件,很多生成图片和打印的场景会用到它。接下来通过本文给大家介绍html2 canvas生成清晰的图片实现打印功能,感兴趣的朋友跟随小编一起看看吧... 19-09-23...
最近由于公司业务要求,需要完成一个一键生成照片图片打印总图的功能
html2canvas是一个非常强大的截图插件,很多生成图片和打印的场景会用到它
但是效果很模糊 ,本文主要记录一下如果解决模糊的问题以及各种参数如何设置
基本用法
window.html2canvas(dom, { scale: scale, width: dom.offsetwidth, height: dom.offsetheight }).then(function (canvas) { var context = canvas.getcontext('2d'); context.mozimagesmoothingenabled = false; context.webkitimagesmoothingenabled = false; context.msimagesmoothingenabled = false; context.imagesmoothingenabled = false; var src64 = canvas.todataurl() }
scale 为放大倍数 ,我这里设置为4 ,越高理论上越清晰
dom.offsetwidth height: dom.offsetheight 直接取得需要转为图片的dom元素的宽高
处理模糊问题
var context = canvas.getcontext('2d'); context.mozimagesmoothingenabled = false; context.webkitimagesmoothingenabled = false; context.msimagesmoothingenabled = false; context.imagesmoothingenabled = false;
这段代码去除锯齿,会使图片变得清晰,结合scale放大处理
细节问题
如果生成的base64太大,会损耗性能,需要压缩base64
首先可能需要获取base64的大小
getimgsize: function (str) { //获取base64图片大小,返回kb数字 var str = str.replace('data:image/jpeg;base64,', '');//这里根据自己上传图片的格式进行相应修改 var strlength = str.length; var filelength = parseint(strlength - (strlength / 8) * 2); // 由字节转换为kb var size = ""; size = (filelength / 1024).tofixed(2); return parseint(size); }
然后根据获取的大小判断你是否要压缩base64
压缩的代码如下
compress: function (base64string, w, quality) { var getmimetype = function (urldata) { var arr = urldata.split(','); var mime = arr[0].match(/:(.*?);/)[1]; // return mime.replace("image/", ""); return mime; }; var newimage = new image(); var imgwidth, imgheight; var promise = new promise(function (resolve) { newimage.onload = resolve; }); newimage.src = base64string; return promise.then(function () { imgwidth = newimage.width; imgheight = newimage.height; var canvas = document.createelement("canvas"); var ctx = canvas.getcontext("2d"); if (math.max(imgwidth, imgheight) > w) { if (imgwidth > imgheight) { canvas.width = w; canvas.height = w * imgheight / imgwidth; } else { canvas.height = w; canvas.width = w * imgwidth / imgheight; } } else { canvas.width = imgwidth; canvas.height = imgheight; } ctx.clearrect(0, 0, canvas.width, canvas.height); ctx.drawimage(newimage, 0, 0, canvas.width, canvas.height); var base64 = canvas.todataurl(getmimetype(base64string), quality); return base64; }) }
使用方法
self.compress(src64,width,1).then(function(base){ src64 = base src64 = src64.replace(/data:image\/.*;base64,/, '') // 调用接口保存图片 }).catch(function(err){ dialog.tip(err.message, dialog.message.warn); })
本文主要包括,html2canvas使用,参数,如何保证图片的清晰度和base64的一下处理
总结
以上所述是小编给大家介绍的html2 canvas生成清晰的图片实现打印功能,希望对大家有所帮助
上一篇: 蚵仔煎是哪里的美食,它是用什么做的