/** * 圖片壓縮，默認同比例壓縮 * @param {Object} path  *   pc端傳入的路徑可以為相對路徑，但是在移動端上必須傳入的路徑是照相圖片儲存的絕對路徑 * @param {Object} obj *   obj 對象 有 width， height， quality(0-1) * @param {Object} callback *   回調函數有一個參數，base64的字符串數據 */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;  // 默認圖片質量為0.7  //生成canvas  var canvas = document.createElement('canvas');  var ctx = canvas.getContext('2d');  // 創建屬性節點  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);  // 圖像質量  if(obj.quality && obj.quality <= 1 && obj.quality > 0){   quality = obj.quality;  }  // quality值越小，所繪制出的圖像越模糊  var base64 = canvas.toDataURL('image/jpeg', quality );  // 回調函數返回base64的值  callback(base64); }}

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