1 2 3 4 5 6 前端壓縮上傳圖片 7 8 9 10 11 12 13 121 122 123 ...
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>
