本文例項為大家分享了使用canvas實現圖片壓縮上傳的具體程式碼，供大家參考，具體內容如下

場景：如使用者頭像等

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

兩方面：

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

示例：

主要技術：使用canvas的drawImage()

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

示例：

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

// 
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;
    // 目標尺寸
  http://www.cppcns.com
 
  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,fDVmA
 
 0,targetWidth,targetHeight);
    // 圖片壓縮
    context.drawImage(img,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.',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) {
        read客棧er.readAsDataURL(file);    
    }
});

注意：

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

// 獲取裝置dpr
getPixelRatio: function(context) {
    let backingStore = context.backingStorePixelRatio ||
    context.webkitBackingStorePixelRatio ||
    context.mozBackingStorePixelRatio ||
    context.msBackingStorePixelRatio ||
    context.oBackingStorePixelRatio ||
    context.backingStorePixelRatio || 1;
    return (windwww.cppcns.comow.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,250,400);

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。