首页 > 作文

html2 canvas生成清晰的图片实现打印功能

更新时间:2023-04-07 08:35:58 阅读: 评论:0

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

htm小学生卫生健康知识l2canvas是一个非常强大的截图插件,很多生成图片和打印的场景会用到它

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

基本用法

window.html2canvas(dom, {        scale: scale,        width: dom.offtwidth,        height: dom.offtheight    }).then(function (canvas) {        var context = canvas.getcontext('2d');        context.mozimagesmoothingenabled = fal;        context.webkitimage交通警示语smoothingenabled = fal;        context.msimagesmoothingenabled = fal;        context.imagesmoothingenabled = fal;        var src64 = canvas.todataurl()}

scale 为放大倍数 ,我这里设置为4 ,越高理论上越清晰

dom.offtwidth height: dom.offtheight 直接取得需要转为图片的dom元素的宽高

处理模糊问题

var context = canvas.getcontext('2d');context.mozimagesmoothingenabled = fal;context.webkitimagesmoothingenabled = fal;context.msimagesmoothingenabled = fal;context.imagesmoothingenabled = fal;

这段代码去除锯齿,会使图片变得清晰,结合scale放大处理

细节问题

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

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

getimgsize: function (str) {    //获取ba64图片大小,返回kb数字    var str = str.replace('data:image/jpeg;ba64,', '');//这里根据自己上传图片的格式进行相应修改    var strlength = str.length;    想的英语单词var filelength = parint(strlength - (strlength / 8) * 2);    // 由字节转换为kb    var size = "";    size = (filelength / 1024).tofixed(2);    return parint(size);}

然后根据获取的大小判断你是否要压缩ba64

压缩的代码如下

compress: function (ba64string, w, quality) {    var getmimetype = function (urldata) {        var arr = urldata.split(',');        var mime = ar梦幻西游元宵节答题r[0].match(/:(.*?);/)[1];        // return mime.replace("image/", "");        return mime;    };    var newimage = new image();    var imgwidth, imgheight;    var promi = new promi(function (resolve) {        newimage.onload = resolve;    });    newimage.src = ba64string;    return promi.then(function () {        imgwidth = newimage.width;        imgheight = newimage.height;        var canvas = document.c罗永娟reateelement("canvas");        var ctx = canvas.getcontext("2d");        if (math.max(imgwidth, imgheight) > w) {            if (imgwidth > imgheight) {                canvas.width = w;                canvas.height = w * imgheight / imgwidth;            } el {                canvas.height = w;                canvas.width = w * imgwidth / imgheight;            }        } el {            canvas.width = imgwidth;            canvas.height = imgheight;        }        ctx.clearrect(0, 0, canvas.width, canvas.height);        ctx.drawimage(newimage, 0, 0, canvas.width, canvas.height);        var ba64 = canvas.todataurl(getmimetype(ba64string), quality);           return ba64;    })}

使用方法

lf.compress(src64,width,1).then(function(ba){    src64 = ba    src64 = src64.replace(/data:image\/.*;ba64,/, '')    // 调用接口保存图片}).catch(function(err){    dialog.tip(err.message, dialog.message.warn);})

本文主要包括,html2canvas使用,参数,如何保证图片的清晰度和ba64的一下处理

总结

以上所述是www.887551.com给大家介绍的html2 canvas生成清晰的图片实现打印功能,希望对大家有所帮助

本文发布于:2023-04-07 08:35:57,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/zuowen/2fb2793966b0421a5346cfefe96c8d27.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

本文word下载地址:html2 canvas生成清晰的图片实现打印功能.doc

本文 PDF 下载地址:html2 canvas生成清晰的图片实现打印功能.pdf

标签:图片   模糊   清晰   总图
相关文章
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图