前端壓縮上傳圖片

 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>前端壓縮上傳圖片</title>
 7     <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
 8 </head>
 9 
 10 <body>
 11     <input type="file" id="picFile" onchange="readFile(this)" />
 12     <img id="img" src="" alt="" />
 13     <script>
 14         function readFile(obj) {  15             var file = obj.files[0];  16             //判斷類型是否是圖片 
 17             if (!/image\/\w+/.test(file.type)) {  18  alert("請確保文件爲圖像類型");  19                 return false;  20  }  21             var reader = new FileReader();  22  reader.readAsDataURL(file);  23  reader.onload = function(e) {  24  dealImage(this.result, { quality: 0.5 }, function(base) {  25                     //調用
 26                     var blob = dataURLtoBlob(base);  27                     var newFile = new File([blob], file.name, { type: file.type });  28  console.log(newFile)  29 
 30  let r = new FileReader(); //本地預覽
 31  r.onload = function() {  32  $('#img').attr("src", r.result);;  33  }  34  r.readAsDataURL(newFile); //Base64
 35 
 36                     // upload(newFile);
 37  });  38  }  39  }  40 
 41         //將base64轉換爲blob
 42         function dataURLtoBlob(dataurl) {  43             var arr = dataurl.split(','),  44  mime = arr[0].match(/:(.*?);/)[1],  45  bstr = atob(arr[1]),  46  n = bstr.length,  47  u8arr = new Uint8Array(n);  48             while (n--) {  49  u8arr[n] = bstr.charCodeAt(n);  50  }  51             return new Blob([u8arr], { type: mime });  52  }  53 
 54 
 55         function upload(file) {  56             var that = this;  57             // 建立form對象
 58  let param = new FormData();  59             // 經過append向form對象添加數據
 60  param.append('img', file);  61             // 文件大小
 62  param.append('size', file.size);  63             for (var n in that.params) {  64  param.append(n, that.params[n]);  65  }  66             
 67             // 建立ajax
 68             var xhr = new XMLHttpRequest();  69 
 70  xhr.onload = function() {  71  console.log(xhr.responseText)  72  }  73  xhr.open("POST", "yourapi", true);  74 
 75             // 發送表單數據
 76  xhr.send(param);  77  }  78         /**  79  * 圖片壓縮，默認同比例壓縮  80  * @param {Object} path  81  * pc端傳入的路徑能夠爲相對路徑，可是在移動端上必須傳入的路徑是照相圖片儲存的絕對路徑  82  * @param {Object} obj  83  * obj 對象 有 width， height， quality(0-1)  84  * @param {Object} callback  85  * 回調函數有一個參數，base64的字符串數據  86          */
 87         function dealImage(path, obj, callback) {  88             var img = new Image();  89  img.src = path;  90  img.onload = function() {  91                 var that = this;  92                 // 默認按比例壓縮
 93                 var w = that.width,  94  h = that.height,  95  scale = w / h;  96  w = obj.width || w;  97  h = obj.height || (w / scale);  98                 var quality = obj.quality || 0.7; // 默認圖片質量爲0.7
 99                 //生成canvas
100                 var canvas = document.createElement('canvas'); 101                 var ctx = canvas.getContext('2d'); 102                 // 建立屬性節點
103                 var anw = document.createAttribute("width"); 104  anw.nodeValue = w; 105                 var anh = document.createAttribute("height"); 106  anh.nodeValue = h; 107  canvas.setAttributeNode(anw); 108  canvas.setAttributeNode(anh); 109  ctx.drawImage(that, 0, 0, w, h); 110                 // 圖像質量
111                 if (obj.quality && obj.quality <= 1 && obj.quality > 0) { 112  quality = obj.quality; 113  } 114                 // quality值越小，所繪製出的圖像越模糊
115                 var base64 = canvas.toDataURL('image/jpeg', quality); 116                 // 回調函數返回base64的值
117  callback(base64); 118  } 119  } 120     </script>
121 </body>
122 
123 </html>