html2canvas生成清晰的图片实现打印的示例代码

前言

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

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

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

目录

1. 基本用法
2. 处理模糊问题
3. 细节问题-压缩base64, 导出处理

基本用法

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的一下处理

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

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！