快捷導(dǎo)航

JS中圖片壓縮的方法小結(jié)

更新時(shí)間：2017年11月14日 14:21:34 投稿：mrr

這篇文章主要介紹了JS中圖片壓縮的方法，包括等比壓縮圖片的方法,需要的朋友可以參考下

首先想一想我們有哪些需求？大多時(shí)候我們需要將一個(gè)File對(duì)象壓縮之后再變?yōu)镕ile對(duì)象傳入到遠(yuǎn)程圖片服務(wù)器；有時(shí)候我們也需要將一個(gè)base64字符串壓縮之后再變?yōu)閎ase64字符串傳入到遠(yuǎn)程數(shù)據(jù)庫(kù)；有時(shí)候后它還有可能是一塊canvas畫(huà)布，或者是一個(gè)Image對(duì)象，或者直接就是一個(gè)圖片的url地址，我們需要將它們壓縮上傳到遠(yuǎn)程；面對(duì)這么多的需求，王二索性畫(huà)了一張圖：

Alt text

二、解決辦法

如上圖所示，王二一共寫(xiě)了七個(gè)方法，基本覆蓋了JS中大部分文件類(lèi)型的轉(zhuǎn)換與壓縮，其中：

1、 urltoImage(url,fn) 會(huì)通過(guò)一個(gè)url加載所需要的圖片對(duì)象，其中 url 參數(shù)傳入圖片的 url , fn 為回調(diào)方法,包含一個(gè)Image對(duì)象的參數(shù)，代碼如下：

function urltoImage (url,fn){
  var img = new Image();
  img.src = url;
  img.onload = function(){
    fn(img);
  }
};

2、 imagetoCanvas(image) 會(huì)將一個(gè) Image 對(duì)象轉(zhuǎn)變?yōu)橐粋€(gè) Canvas 類(lèi)型對(duì)象，其中 image 參數(shù)傳入一個(gè)Image對(duì)象，代碼如下：

function imagetoCanvas(image){
  var cvs = document.createElement("canvas");
  var ctx = cvs.getContext('2d');
  cvs.width = image.width;
  cvs.height = image.height;
  ctx.drawImage(image, 0, 0, cvs.width, cvs.height);
  return cvs ;
};

3、 canvasResizetoFile(canvas,quality,fn) 會(huì)將一個(gè) Canvas 對(duì)象壓縮轉(zhuǎn)變?yōu)橐粋€(gè) Blob 類(lèi)型對(duì)象；其中 canvas 參數(shù)傳入一個(gè) Canvas 對(duì)象; quality 參數(shù)傳入一個(gè)0-1的 number 類(lèi)型，表示圖片壓縮質(zhì)量; fn 為回調(diào)方法，包含一個(gè) Blob 對(duì)象的參數(shù);代碼如下：

function canvasResizetoFile(canvas,quality,fn){
  canvas.toBlob(function(blob) {
    fn(blob);
  },'image/jpeg',quality);
};

這里的 Blob 對(duì)象表示不可變的類(lèi)似文件對(duì)象的原始數(shù)據(jù)。 Blob 表示不一定是 JavaScript 原生形式的數(shù)據(jù)。 File 接口基于 Blob ，繼承了 Blob 的功能并將其擴(kuò)展使其支持用戶(hù)系統(tǒng)上的文件。我們可以把它當(dāng)做File類(lèi)型對(duì)待，其他更具體的用法可以參考MDN文檔

4、 canvasResizetoDataURL(canvas,quality) 會(huì)將一個(gè) Canvas 對(duì)象壓縮轉(zhuǎn)變?yōu)橐粋€(gè) dataURL 字符串,其中 canvas 參數(shù)傳入一個(gè) Canvas 對(duì)象; quality 參數(shù)傳入一個(gè)0-1的 number 類(lèi)型，表示圖片壓縮質(zhì)量;代碼如下：

methods.canvasResizetoDataURL = function(canvas,quality){
  return canvas.toDataURL('image/jpeg',quality);
};

其中的 toDataURL API可以參考MDN文檔

5、 filetoDataURL(file,fn) 會(huì)將 File （ Blob ）類(lèi)型文件轉(zhuǎn)變?yōu)?dataURL 字符串,其中 file 參數(shù)傳入一個(gè) File （ Blob ）類(lèi)型文件; fn 為回調(diào)方法，包含一個(gè) dataURL 字符串的參數(shù);代碼如下：

function filetoDataURL(file,fn){
  var reader = new FileReader();
  reader.onloadend = function(e){
    fn(e.target.result);
  };
  reader.readAsDataURL(file);
};

6、 dataURLtoImage(dataurl,fn) 會(huì)將一串 dataURL 字符串轉(zhuǎn)變?yōu)?Image 類(lèi)型文件,其中 dataurl 參數(shù)傳入一個(gè) dataURL 字符串, fn 為回調(diào)方法，包含一個(gè) Image 類(lèi)型文件的參數(shù)，代碼如下：

function dataURLtoImage(dataurl,fn){
  var img = new Image();
  img.onload = function() {
    fn(img);
  };
  img.src = dataurl;
};

7、 dataURLtoFile(dataurl) 會(huì)將一串 dataURL 字符串轉(zhuǎn)變?yōu)?Blob 類(lèi)型對(duì)象，其中 dataurl 參數(shù)傳入一個(gè) dataURL 字符串,代碼如下：

function dataURLtoFile(dataurl) {
  var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
    bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
  while(n--){
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new Blob([u8arr], {type:mime});
};

三、進(jìn)一步封裝

對(duì)于常用的將一個(gè) File 對(duì)象壓縮之后再變?yōu)?File 對(duì)象,我們可以將上面的方法再封裝一下，參考如下代碼：

function fileResizetoFile(file,quality,fn){
  filetoDataURL (file,function(dataurl){
    dataURLtoImage(dataurl,function(image){
      canvasResizetoFile(imagetoCanvas(image),quality,fn);
    })
  })
}

其中， file 參數(shù)傳入一個(gè) File （ Blob ）類(lèi)型文件； quality 參數(shù)傳入一個(gè) 0-1 的 number 類(lèi)型，表示圖片壓縮質(zhì)量； fn 為回調(diào)方法，包含一個(gè) Blob 類(lèi)型文件的參數(shù)。

它使用起來(lái)就像下面這樣：

var file = document.getElementById('demo').files[0];
fileResizetoFile(file,0.6,function(res){
  console.log(res);
  //拿到res，做出你要上傳的操作；
})

這樣的話，圖片壓縮上傳就能輕松地搞定了，以上的8個(gè)方法我已經(jīng)封裝好放到 github 上了，喜歡的話可以使勁的star哈。

參考文檔：

MDN

ps：下面看下JS等比壓縮圖片的辦法

function proDownImage(path,imgObj) { // 等比壓縮圖片工具 
  //var proMaxHeight = 185; 
  var proMaxHeight=300; 
  var proMaxWidth = 175; 
  var size = new Object();　 
  var image = new Image();　 
  image.src = path;　 
  image.attachEvent("onreadystatechange", 
  function() { // 當(dāng)加載狀態(tài)改變時(shí)執(zhí)行此方法,因?yàn)閕mg的加載有延遲 
    if (image.readyState == "complete") { // 當(dāng)加載狀態(tài)為完全結(jié)束時(shí)進(jìn)入 
      if (image.width > 0 && image.height > 0) { 
        var ww = proMaxWidth / image.width; 
        var hh = proMaxHeight / image.height;　 
        var rate = (ww < hh) ? ww: hh; 
        if (rate <= 1) {　 
          alert("imgage width*rate is:" + image.width * rate); 
          size.width = image.width * rate; 
          size.height = image.height * rate; 
        } else { 
          alert("imgage width is:" + image.width);　　 
          size.width = image.width;　　 
          size.height = image.height;　　　 
        }　 
      } 
    } 
    imgObj.attr("width",size.width); 
    imgObj.attr("height",size.height); 
  }); 
}

總結(jié)

以上所述是小編給大家介紹的JS中圖片壓縮的方法小結(jié)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: