Vue使用canvas實現(xiàn)圖片壓縮上傳

更新時間：2021年08月27日 16:20:57 作者：i大俊

這篇文章主要為大家詳細介紹了Vue使用canvas實現(xiàn)圖片壓縮上傳，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了Vue使用canvas實現(xiàn)圖片壓縮上傳的具體代碼，供大家參考，具體內(nèi)容如下

場景：如用戶頭像等

對于大尺寸圖片的上傳，在前端進行壓縮除了省流量外，最大的意義是極大的提高了用戶體驗。

兩方面：

1、由于上傳圖片尺寸比較小，因此上傳速度會比較快，交互會更加流暢，同時大大降低了網(wǎng)絡(luò)異常導致上傳失敗風險。
2、很多網(wǎng)站的圖片上傳功能都會對圖片的大小進行限制，尤其是頭像上傳，限制5M或者2M以內(nèi)是非常常見的（但是我用單反拍了個頭像，照片超過2M很正常，要對圖片進行處理才能上傳）。如果可以在前端進行壓縮，則理論上對圖片尺寸的限制是沒有必要的。

示例：

主要技術(shù)：使用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轉(zhuǎn)為blob并上傳
    canvas.toBlob(function (blob) {
        // 圖片ajax上傳
        var xhr = new XMLHttpRequest();
        // 文件上傳成功
        xhr.onreadystatechange = function() {
            if (xhr.status == 200) {
                // xhr.responseText就是返回的數(shù)據(jù)
            }
        };
        // 開始上傳
        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);    
    }
});

注意：

移動端會出現(xiàn)圖片變形，需要根據(jù)設(shè)備的dpr對canvas進行放大，再用css進行強制恢復(fù)

// 獲取設(shè)備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);

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: