快捷導(dǎo)航

JS圖片壓縮（pc端和移動(dòng)端都適用）

更新時(shí)間：2017年01月12日 08:51:34 作者：腥膩

本文主要分享了JS圖片壓縮的方法。具有一定的參考價(jià)值，下面跟著小編一起來看下吧

最近在做移動(dòng)端遇到了一個(gè)問題就是：手機(jī)拍照后，圖片過大如果上傳到服務(wù)器務(wù)必會(huì)浪費(fèi)帶寬，最重要的是流量啊別慌，好事兒來了，務(wù)必就會(huì)有人去研究研究圖片的壓縮：

鄙人結(jié)合前人的經(jīng)驗(yàn)，結(jié)合自己實(shí)戰(zhàn)，總結(jié)出一個(gè)方法供大家參考:

/**
 * 圖片壓縮，默認(rèn)同比例壓縮
 * @param {Object} path 
 *   pc端傳入的路徑可以為相對(duì)路徑，但是在移動(dòng)端上必須傳入的路徑是照相圖片儲(chǔ)存的絕對(duì)路徑
 * @param {Object} obj
 *   obj 對(duì)象 有 width， height， quality(0-1)
 * @param {Object} callback
 *   回調(diào)函數(shù)有一個(gè)參數(shù)，base64的字符串?dāng)?shù)據(jù)
 */
function dealImage(path, obj, callback){
 var img = new Image();
 img.src = path;
 img.onload = function(){
  var that = this;
  // 默認(rèn)按比例壓縮
  var w = that.width,
   h = that.height,
   scale = w / h;
   w = obj.width || w;
   h = obj.height || (w / scale);
  var quality = 0.7;  // 默認(rèn)圖片質(zhì)量為0.7
  //生成canvas
  var canvas = document.createElement('canvas');
  var ctx = canvas.getContext('2d');
  // 創(chuàng)建屬性節(jié)點(diǎn)
  var anw = document.createAttribute("width");
  anw.nodeValue = w;
  var anh = document.createAttribute("height");
  anh.nodeValue = h;
  canvas.setAttributeNode(anw);
  canvas.setAttributeNode(anh); 
  ctx.drawImage(that, 0, 0, w, h);
  // 圖像質(zhì)量
  if(obj.quality && obj.quality <= 1 && obj.quality > 0){
   quality = obj.quality;
  }
  // quality值越小，所繪制出的圖像越模糊
  var base64 = canvas.toDataURL('image/jpeg', quality );
  // 回調(diào)函數(shù)返回base64的值
  callback(base64);
 }
}

當(dāng)然返回的是一個(gè)base64的一個(gè)字符串；

如果可以試著測試一下壓縮后的圖片大小：

// 調(diào)用函數(shù)處理圖片 　　　　　　　　　　　　　　　　
dealImage("路徑", {
// 注意：在pc端可以用絕對(duì)路徑或相對(duì)路徑，移動(dòng)端最好用絕對(duì)路徑（因?yàn)橛胻ake photo后的圖片路徑，我沒有試成功（如果有人試成功了可以分享一下經(jīng)驗(yàn)））
 width : 200
}, function(base){
//直接將獲取到的base64的字符串，放到一個(gè)image標(biāo)簽中就可看到測試后的壓縮之后的樣式圖了
 document.getElementById("transform").src = base;
 console.log("壓縮后：" + base.length / 1024 + " " + base);　　　　
})

PS：主要思想就是獲取到圖片，利用H5 canvas技術(shù)進(jìn)行圖片數(shù)據(jù)化為 base64 的字符串，最后傳到后臺(tái)進(jìn)行，后臺(tái)將base64的字符串?dāng)?shù)據(jù)進(jìn)行圖像化儲(chǔ)存。

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章: