本文作者：Marydon

原文連結：https://www.cnblogs.com/Marydon20170307/p/11486511.html

1.情景展示

　　如上圖所示，點選上傳圖片按鈕，呼叫手機攝像頭拍照功能。

　　<input onchange="javascript:imgFun.uploadPicture();" type="file" name="file" id="file" accept="image/*" capture="camera" style="display: none;">

　　我們知道現在，手機拍照在10MB左右，體積太大，在上傳到伺服器前，能不能只縮小圖片的體積，而不改變圖片尺寸？

2.原因分析

　　通過canvas實現對圖片的重新繪製。

　　程式碼展示：

/**
 * 圖片壓縮
 * @explain 藉助canvas對圖片進行重繪（canvas2DataURL）
 * @param base64Url base64格式的圖片字串
 * @param imgAttr  重繪圖片寬度、高度、質量等屬性的設定
 * @param callback 該函式執行完畢後，要執行的回撥函式
 * @returns
 */
function photoCompress (base64Url,imgAttr,callback){
  var img = new Image();
  img.src = base64Url;
  img.onload = function(){
    var that = this;
    // 預設按比例壓縮
    var w = that.width,h = that.height,// 寬高比例
      scale = w / h;
    w = imgAttr.width || w;
    h = imgAttr.height || (w / scale);
    // 預設圖片質量為0.7
    var quality = 0.7;
    //生成canvas
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    // 建立屬性節點
    var anw = document.createAttribute("width");
    anw.nodeValue = w;
    canvas.setAttributeNode(anw);
    var anh = document.createAttribute("height");
    anh.nodeValue = h;
    canvas.setAttributeNode(anh);
    ctx.drawImage(that,w,h);
    // 影象質量（0-1）
    if(imgAttr.quality && imgAttr.quality <= 1 && imgAttr.quality > 0){
      quality = imgAttr.quality;
    }
    // 重繪後的圖片型別
    var imgType = imgAttr.type || 'image/jpeg';
    // quality值越小，所繪製出的影象越模糊
    var base64 = canvas.toDataURL(imgType,quality);
    // 回撥函式返回base64的值
    callback(base64);
  };
}　　　　

　　可自定義設定圖片質量，圖片的寬高（通過imgAttr設定）。　　

3.完整示例

// js 獲取檔案物件
var fileObj = document.getElementById("file").files[0];
if (null == fileObj) {
  alert("影象上傳失敗，請重試！");
}
// 檔案讀取物件
var reader = new FileReader();
// 圖片轉base64（Blob物件或File物件）
reader.readAsDataURL(fileObj);
// 圖片大小<=1MB，size的單位：B（1Mb=1B*1024*1024）
if(fileObj.size/1024 <= 1024) {
  reader.onload = function(e) {
    // 獲取對應的base64
    var imgBase64 = e.target.result;
    // 將圖片的base64碼傳給後臺
    // 呼叫騰訊介面
    $.post(baseUrl + "/weixin/facein/upImg2.do",{imgBase64:imgBase64},function(resData){
      // TODO 對返回的介面資料進行自動填充處理
    });
  };
} else {
  // 讀取完畢
  reader.onload = function(){
    // 圖片轉換成為base64Url
    var fileBase64 = this.result;
    // 圖片引數
    var imgAttr = {quality : 0.2,type : 'img/jpeg'};
    // 回撥函式
    var callBack = function (base64Codes) {
      // 圖片比較
      // 呼叫騰訊介面
       
    };
    // 壓縮圖片
    photoCompress(fileBase64,callBack);
  };
}

　　說明：

　　前端對圖片進行重繪，對瀏覽器有一定的要求，我測試的時候在電腦端沒有問題，但是，在微信上使用時，就會很難受了，會將微信的qq瀏覽器核心搞垮，根本無法使用。

　　不得以，放棄了在前端進行壓縮的想法，轉而直接將圖片以流的形式提交至後臺，由java負責圖片壓縮處理。

　　補充：

　　圖片優化方面可以考慮從以下幾個方面著手：減小解析度 >壓縮圖片>chrome使用webp格式

寫在最後

　　哪位大佬如若發現文章存在紕漏之處或需要補充更多內容，歡迎留言！！！

以上就是js 壓縮圖片的示例（只縮小體積，不更改圖片尺寸）的詳細內容，更多關於js 壓縮圖片的資料請關注我們其它相關文章！