Vue如何使用canvas實現圖片壓縮上傳

本篇內容介紹了“Vue如何使用canvas實現圖片壓縮上傳”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

示例：

主要技術：使用canvas的drawImage()方法。（附：canvas.toDataURL()或者canvas.toBlob()）

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');

// 壓縮圖片需要的一些元素和對象
var reader = new FileReader(), img = new Image();

// 選擇的文件對象
var file = null;

// 縮放圖片需要的canvas
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');

// base64地址圖片加載完畢后
img.onload = function () {
    // 圖片原始尺寸
    var originWidth = this.width;
    var originHeight = this.height;
    // 最大尺寸限制
    var maxWidth = 400, maxHeight = 400;
    // 目標尺寸
    var targetWidth = originWidth, targetHeight = originHeight;
    // 圖片尺寸超過400x400的限制
    if (originWidth > maxWidth || originHeight > maxHeight) {
        if (originWidth / originHeight > maxWidth / maxHeight) {
            // 更寬，按照寬度限定尺寸
            targetWidth = maxWidth;
            targetHeight = Math.round(maxWidth * (originHeight / originWidth));
        } else {
            targetHeight = maxHeight;
            targetWidth = Math.round(maxHeight * (originWidth / originHeight));
        }
    }
        
    // canvas對圖片進行縮放
    canvas.width = targetWidth;
    canvas.height = targetHeight;
    // 清除畫布
    context.clearRect(0, 0, targetWidth, targetHeight);
    // 圖片壓縮
    context.drawImage(img, 0, 0, targetWidth, targetHeight);
    // canvas轉為blob并上傳
    canvas.toBlob(function (blob) {
        // 圖片ajax上傳
        var xhr = new XMLHttpRequest();
        // 文件上傳成功
        xhr.onreadystatechange = function() {
            if (xhr.status == 200) {
                // xhr.responseText就是返回的數據
            }
        };
        // 開始上傳
        xhr.open("POST", 'upload.php', true);
        xhr.send(blob);    
    }, file.type || 'image/png');
};

// 文件base64化，以便獲知圖片原始尺寸
reader.onload = function(e) {
    img.src = e.target.result;
};
eleFile.addEventListener('change', function (event) {
    file = event.target.files[0];
    // 選擇的文件是圖片
    if (file.type.indexOf("image") == 0) {
        reader.readAsDataURL(file);    
    }
});

注意：

移動端會出現圖片變形，需要根據設備的dpr對canvas進行放大，再用css進行強制恢復

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

// 大概這樣
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);

//進行正常的操作
ctx.drawImage(this.$refs.cropImg, 0, 0, 250, 400);

“Vue如何使用canvas實現圖片壓縮上傳”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！