一 前言

最近負責的H5中，有個上傳照片的功能，照片是上傳到阿里雲。大家可能知道，手機拍到照片一般都較大，而伺服器限制了上傳圖片的大小（伺服器好像是可以設定這個大小的），於是開始研究利用canvas壓縮圖片，當然你也可以利用外掛。廢話不多說，只要你仔細看完，保證你能成功。

二 程式碼

HTML：

<!--上傳圖片-->
<input type="file" name="fileToUpload" id="fileToUpload"/> <br />
<input type="text" name="compressValue" id="compressValue" 
 
style="display:none;" /><br/>
<!--<input type="button" id='uploadBtn' value="上傳" /><br/>-->
<input type="hidden" id="canvasData" value="canvasHidden">

Jquery：

function processfile(file,compressValue) {
    var reader = new FileReader();
    reader.onload = function (
 
event) {
        var blob = new Blob([event.target.result]);
        window.URL = window.URL || window.webkitURL;
        var blobURL = window.URL.createObjectURL(blob);
        var image = new Image();
        image.src = blobURL;
        image.onload = function() {
            var resized = resizeMe
 
(image);
            compressValue.value = resized;
        }
    };
    reader.readAsArrayBuffer(file);
}

function resizeMe(img) {
    //壓縮的大小
    /*var max_width = 1920;
    var max_height = 1080;*/

    //設定這兩個引數改變壓縮後的大小
    var max_width = 3920;
    var max_height = 3080;

    var canvas = document.createElement('canvas');
    var width = img.width;
    var height = img.height;
    if(width > height) {
        if(width > max_width) {
            height = Math.round(height *= max_width / width);
            width = max_width;
        }
    }else{
        if(height > max_height) {
            width = Math.round(width *= max_height / height);
            height = max_height;
        }
    }

    canvas.width = width;
    canvas.height = height;

    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0, width, height);
    //壓縮率
    return canvas.toDataURL("image/jpeg",0.92);
}

點選事件

$('#xxx').on("click",function () {
    var preview = document.getElementById('compressValue').value;

    //preview就是壓縮後的資料，是base64格式
    console.log("preview}"+preview);
    if(preview == "") {
        toastr.warning("請選擇圖片");
    } else {
        var formFile = new FormData();
        formFile.append("xxx", xxx);
        formFile.append("file", preview); //加入檔案物件
        var data = formFile;
        var url = "。。。";

        AJAXPOSTIMG(url, data, function () {
               。。。
        })
    }
})

java後臺

後臺用String接受就行

Base64轉成MultipartFile：

public static MultipartFile base64ToMultipart(String base64) {
   try {
      String[] baseStrs = base64.split(",");

      BASE64Decoder decoder = new BASE64Decoder();
      byte[] b = new byte[0];
      b = decoder.decodeBuffer(baseStrs[1]);

      for(int i = 0; i < b.length; ++i) {
         if (b[i] < 0) {
            b[i] += 256;
         }
      }

      return new BASE64DecodedMultipartFile(b, baseStrs[0]);
   } catch (IOException e) {
      e.printStackTrace();
      return null;
   }
}

Base64：

Base64格式中，逗號前面是頭部，後面是資料，如果傳到後臺的Base64沒有頭部，會報 索引越界，詳見工具類程式碼。

實測，將8兆多的圖片壓縮成73kb，當然圖片會失真，可以適當調整上面兩個引數。

三 分析

這裡不是點選圖片呼叫ajax，而是和其他資訊一起提交（也不是表單）。前端將圖片轉成Base64格式，也就是傳到後臺的資料是Base64格式的，後臺需要將Base64轉成MultipartFile，再呼叫阿里雲OSS有關api（基本是封裝好的工具類中）。

到此Ok

原作者：https://blog.csdn.net/ityang521/article/details/70667037

若侵權，請及時留言告知，以作修改