前端壓縮上傳圖片

  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>
相關文章
相關標籤/搜索