欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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生成清晰的图片实现打印功能,希望对大家有所帮助