Vue uses canvas to realize image compression upload

ctx.drawImage(image, dx, dy);
ctx.drawImage(image, dx, dy, dWidth, dHeight);
ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

//html
<input id="file" type="file">

// JS
var eleFile = document.querySelector('#file');

//Some elements and objects needed to compress images var reader = new FileReader(), img = new Image();

//Selected file object var file = null;

//Scaling the canvas required for the image
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');

// After the base64 address image is loaded, img.onload = function () {
    //Original size of the image var originWidth = this.width;
    var originHeight = this.height;
    // Maximum size limit var maxWidth = 400, maxHeight = 400;
    // Target size var targetWidth = originWidth, targetHeight = originHeight;
    // The image size exceeds the limit of 400x400 if (originWidth > maxWidth || originHeight > maxHeight) {
        if (originWidth / originHeight > maxWidth / maxHeight) {
            // Wider, limit the size according to the width targetWidth = maxWidth;
            targetHeight = Math.round(maxWidth * (originHeight / originWidth));
        } else {
            targetHeight = maxHeight;
            targetWidth = Math.round(maxHeight * (originWidth / originHeight));
        }
    }
        
    // canvas scales the image canvas.width = targetWidth;
    canvas.height = targetHeight;
    // Clear the canvas context.clearRect(0, 0, targetWidth, targetHeight);
    // Image compression context.drawImage(img, 0, 0, targetWidth, targetHeight);
    // Convert canvas to blob and upload canvas.toBlob(function (blob) {
        // Ajax upload of pictures var xhr = new XMLHttpRequest();
        // File upload successful xhr.onreadystatechange = function() {
            if (xhr.status == 200) {
                // xhr.responseText is the returned data}
        };
        // Start uploading xhr.open("POST", 'upload.php', true);
        xhr.send(blob);    
    }, file.type || 'image/png');
};

// Convert the file to base64 to get the original size of the image reader.onload = function(e) {
    img.src = e.target.result;
};
eleFile.addEventListener('change', function (event) {
    file = event.target.files[0];
    // The selected file is an image if (file.type.indexOf("image") == 0) {
        reader.readAsDataURL(file);    
    }
});

// Get device dpr
getPixelRatio: function(context) {
    let backingStore = context.backingStorePixelRatio ||
    context.webkitBackingStorePixelRatio ||
    context.mozBackingStorePixelRatio ||
    context.msBackingStorePixelRatio ||
    context.oBackingStorePixelRatio ||
    context.backingStorePixelRatio || 1;
    return (window.devicePixelRatio || 1) / backingStore;
}

// something like this const ctx = this.canvas.getContext("2d");
const dpr = this.getPixelRatio(ctx);
this.$refs.postImg.crossOrigin = "Anonymous";
var oldWidth = this.canvas.width;
var oldHeight = this.canvas.height;
this.canvas.style.width = oldWidth + 'px'; 
this.canvas.style.height = oldHeight + 'px';
this.canvas.width = oldWidth * dpr;
this.canvas.height = oldHeight * dpr;
ctx.scale(dpr, dpr);

//Perform normal operations ctx.drawImage(this.$refs.cropImg, 0, 0, 250, 400);