preface

Html2canvas is a very powerful screenshot plug-in. It is used in many scenes of generating pictures and printing, but the effect is very fuzzy. This paper mainly records how to solve the fuzzy problem and how to set various parameters

directory

  1. Basic usage
  2. Dealing with ambiguity
  3. Details – Compression base64, export processing

Basic usage

 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()
}
Copy the code

Scale is the magnification factor, which I set to 4. The higher it is, the clearer it is in theory. Dom

Dealing with ambiguity

var context = canvas.getContext('2d');
context.mozImageSmoothingEnabled = false;
context.webkitImageSmoothingEnabled = false;
context.msImageSmoothingEnabled = false;
context.imageSmoothingEnabled = false;
Copy the code

This code removes the aliasing and makes the picture clear, combined with scale amplification

The details

If the generated Base64 is too large, performance is compromised and you need to compress base64

You might first need to get the base64 size

getImgSize: functionVar STR = str.replace(STR) {// Get base64 image size, return KB number var STR = str.replace('data:image/jpeg; base64,'.' '); Var strLength = str.length; var fileLength = parseInt(strLength - (strLength / 8) * 2); // Convert bytes to KB"";
    size = (fileLength / 1024).toFixed(2);

    return parseInt(size);
}
Copy the code

Then determine if you want to compress Base64 based on the size obtained by the code below

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);   
        returnbase64; })}Copy the code

Method of use

self.compress(src64,width,1).then(function(base){ src64 = base src64 = src64.replace(/data:image\/.*; base64,/,' ') // Call the interface to save the picture}).catch(function(err){
    dialog.tip(err.message, dialog.MESSAGE.WARN);
})
Copy the code

This paper mainly includes html2Canvas use, parameters, how to ensure the clarity of the picture and base64 processing