快捷導航

JS圖片壓縮（pc端和移動端都適用）

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

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

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

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

/**
 * 圖片壓縮，默認同比例壓縮
 * @param {Object} path 
 *   pc端傳入的路徑可以為相對路徑，但是在移動端上必須傳入的路徑是照相圖片儲存的絕對路徑
 * @param {Object} obj
 *   obj 對象 有 width， height， quality(0-1)
 * @param {Object} callback
 *   回調(diào)函數(shù)有一個參數(shù)，base64的字符串數(shù)據(jù)
 */
function dealImage(path, obj, callback){
 var img = new Image();
 img.src = path;
 img.onload = function(){
  var that = this;
  // 默認按比例壓縮
  var w = that.width,
   h = that.height,
   scale = w / h;
   w = obj.width || w;
   h = obj.height || (w / scale);
  var quality = 0.7;  // 默認圖片質(zhì)量為0.7
  //生成canvas
  var canvas = document.createElement('canvas');
  var ctx = canvas.getContext('2d');
  // 創(chuàng)建屬性節(jié)點
  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);
 }
}

當然返回的是一個base64的一個字符串；

如果可以試著測試一下壓縮后的圖片大?。?/p>

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

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

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

您可能感興趣的文章: