圖片壓縮上傳

作微信網頁版圖片上傳的時候遇到了一個問題，微信截圖能夠上傳，保存下來或是拍照的圖片不能上傳，最後發現是圖片格式的問題

以往圖片上傳都是‘jpeg、jpg、png、gif’這樣的格式都能上傳，可是微信網頁內圖片上傳時，其它格式都能上傳，只有jpeg後綴的圖片不能上傳，暈死

解決辦法：斷定後綴是否爲jpeg，若是是，從新建一個上傳文件對象，傳入名字，格式就能夠了

如： 

var afile;
const file = $("#fileimg").get(0).files[0];

if(file.type.indexOf('jpeg') != -1){
　　afile = new File([file], new Date().getTime()+".jpg", {type: 'image/jpg'});
}else{
　　afile = file;
}

 

圖片上傳壓縮圖片大小

  1 // 壓縮版
  2 function uploadImg(formId, filename, showimg){
  3   var file;
  4   var inputImgUrl = $("#img").val();
  5   var afile = $("#fileimg").get(0).files[0];
  6 
  7   if(['jpeg', 'png', 'gif', 'jpg'].indexOf(afile.type.split("/")[1])<0){
  8       toastr.error("請上傳圖片格式文件")
  9       return;
 10   }
 11 
 12   if(afile.type.indexOf('jpeg') != -1){
 13       file = new File([afile], new Date().getTime()+".jpg", {type: 'image/jpg'});
 14   }else{
 15       file = afile;
 16   }
 17 
 18   var formData = new FormData();
 19 
 20   if(file.size/1024 > 1025) { //大於1M，進行壓縮上傳
 21       photoCompress(file, 640, function(base64Codes){
 22           var blob = convertBase64UrlToBlob(base64Codes);
 23           formData.append("file", blob, file.name); 
 24           console.log("將blob對象轉成formData對象：" + file.name);
 25           UploadImgAjax(formData,inputImgUrl,showimg);
 26       });
 27   }else{
 28       formData.append("file", file);
 29       UploadImgAjax(formData,inputImgUrl,showimg);
 30   }
 31 }
 32 
 33 /*
 34 三個參數
 35 file：一個是文件(類型是圖片格式)，
 36 w：一個是文件壓縮的後寬度，寬度越小，字節越小
 37 objDiv：一個是容器或者回調函數
 38 photoCompress()
 39 */
 40 function photoCompress(file,w,objDiv){
 41     var ready=new FileReader();
 42     /*開始讀取指定的Blob對象或File對象中的內容. 當讀取操做完成時,readyState屬性的值會成爲DONE,若是設置了onloadend事件處理程序,則調用之.同時,result屬性中將包含一個data: URL格式的字符串以表示所讀取文件的內容.*/
 43     ready.readAsDataURL(file);
 44     ready.onload=function(){
 45         var re=this.result;
 46         canvasDataURL(re,w,objDiv)
 47     }
 48 }
 49 function canvasDataURL(path, w, callback){
 50   var newImage  = new Image();
 51   var quality = 0.6;    //壓縮係數0-1之間
 52   newImage.src = path;
 53   newImage.setAttribute("crossOrigin", 'Anonymous');  //url爲外域時須要
 54   var imgWidth, imgHeight;
 55 
 56   newImage .onload = function(){
 57     imgWidth = this.width;
 58     imgHeight = this.height;
 59     //生成canvas
 60     var canvas = document.createElement("canvas");
 61     var ctx = canvas.getContext("2d");
 62     if (imgWidth > w) {
 63         canvas.width = w;
 64         canvas.height = w * imgHeight / imgWidth;
 65     }else {
 66       canvas.width = imgWidth;
 67       canvas.height = imgHeight;
 68       quality = 0.6;
 69     }
 70     ctx.clearRect(0, 0, canvas.width, canvas.height);
 71     ctx.fillStyle = "#fff";
 72     ctx.fillRect(0, 0, canvas.width, canvas.height);
 73     ctx.drawImage(this, 0, 0, canvas.width, canvas.height);
 74     var base64 = canvas.toDataURL("image/jpeg", quality);//壓縮語句
 75     
 76     //回調函數返回base64的值
 77     callback(base64);
 78   }
 79 }
 80 
 81 /**
 82 * 將以base64的圖片url數據轉換爲Blob
 83 * @param urlData
 84 * 用url方式表示的base64圖片數據
 85 */
 86 function convertBase64UrlToBlob(urlData){
 87   var arr = urlData.split(','), mime = arr[0].match(/:(.*?);/)[1],
 88       bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
 89   while(n--){
 90       u8arr[n] = bstr.charCodeAt(n);
 91   }
 92   return new Blob([u8arr], {type:mime});
 93 }
 94 
 95 function UploadImgAjax(formData,inputImgUrl,showimg){
 96     $.ajax({
 97         url: 上傳圖片接口,
 98         type: 'POST',
 99         data: formData,                    // 上傳formdata封裝的數據
100         dataType: 'JSON',
101         cache: false,                      // 不緩存
102         processData: false,                // jQuery不要去處理髮送的數據
103         contentType: false,                // jQuery不要去設置Content-Type請求頭
104         success:function (ret) {          //成功回調
105             var img = ret.pic;
106             if(inputImgUrl){
107               inputImgUrl += "," + ret.pic;
108             }else{
109               inputImgUrl = ret.pic;
110             }
111             $('.'+showimg).before("<span><i class='omit'></i><img src='"+img+"'/></span>");
112             $('#img').val(inputImgUrl);
113         },
114         error: function(){
115             console.log("error");
116             toastr.error(ret.message);
117         }
118     });
119 }

View Code

 

後續增長刪除上傳過的圖片

<div class="attach-mypic mlr05">
                <span class="add">
                    <img src="{{ BootstrapHelper.getStaDomain() }}images/kacommunity/icon/Upload-picture.png">
                    <input type="file" name="fileimg" id="fileimg" class="fileupload" onchange="uploadImg('imgform', 'fileimg', 'add')"  value="" accept="image/*">
                </span>
            </div>


$(".attach-mypic").on("click", ".omit", function(){
  var imgVal=$("#img").val(),thisImgUrl = $(this).siblings("img")[0].src,tempUrlArr=imgVal.split(",");
  for(var i=0;i<tempUrlArr.length;i++){
    if(tempUrlArr[i] == thisImgUrl){
      tempUrlArr.splice(i, 1);
      imgVal = tempUrlArr.join(",");
      $(this).parent().remove();
      $('#img').val(imgVal);
      return ;
    }
  }
});

View Code

 

在網上找了個兼容版本的，可是在ios上圖片沒有壓縮，先把代碼放上，有時間再測試（此版代碼壓縮沒有效果，如須要壓縮圖片，用上面的版本）

  1 const imgFile = {};
  2 var inputImgUrl = $("#img").val();
  3 function uploadImg(formId, filename, showimg){
  4     var afile;
  5     const file = $("#fileimg").get(0).files[0];
  6     const imgMasSize = 1024
  7 
  8     if(['jpeg', 'png', 'gif', 'jpg'].indexOf(file.type.split("/")[1])<0){
  9         toastr.error("請上傳圖片格式文件")
 10         return;
 11     }
 12 
 13     if(file.type.indexOf('jpeg') != -1){
 14         afile = new File([file], new Date().getTime()+".jpg", {type: 'image/jpg'});
 15     }else{
 16         afile = file;
 17     }
 18 
 19     // if(file.size/1024 > 1025){
 20     //     alert("太大了");
 21     // }
 22 
 23     if(!!window.navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)){
 24         transformFileToFormData(afile);
 25         return;
 26     }
 27 
 28     transformFileToDataUrl(afile);
 29 
 30 }
 31 
 32 function transformFileToFormData(file){
 33     const formData = new FormData();
 34 
 35     formData.append('type', file.type || "image/jpg");
 36 
 37     formData.append('size', file.size);
 38 
 39     formData.append('name', file.name);
 40 
 41     formData.append('lastModifiedDate', file.lastModifiedDate);
 42 
 43     formData.append('file', file);
 44 
 45     // uploadImg(formData);
 46     UploadImgAjax(formData);
 47 }
 48 
 49 function transformFileToDataUrl(file){
 50     const imgCompassMaxSize = 1024;
 51 
 52     imgFile.type = file.type || 'image/jpg';
 53     imgFile.size = file.size;
 54     imgFile.name = file.name;
 55     imgFile.lastModifiedDate = file.lastModifiedDate;
 56 
 57     const reader = new FileReader();
 58 
 59     reader.onload = function(e){
 60         const result = e.target.result;
 61 
 62         if(result.length < imgCompassMaxSize){
 63             compress(result, processData, false);
 64         }else{
 65             compress(result, processData);
 66         }
 67     };
 68 
 69     reader.readAsDataURL(file);
 70 }
 71 
 72 // 使用canvas繪製圖片並壓縮
 73 function compress (dataURL, callback, shouldCompress = true) {
 74     const img = new window.Image();
 75 
 76     img.src = dataURL;
 77 
 78     img.onload = function () {
 79         const canvas = document.createElement('canvas');
 80         const ctx = canvas.getContext('2d');
 81 
 82         canvas.width = img.width;
 83         canvas.height = img.height;
 84 
 85         ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
 86 
 87         let compressedDataUrl;
 88 
 89         if(shouldCompress){
 90             compressedDataUrl = canvas.toDataURL(imgFile.type, 0.2);
 91         } else {
 92             compressedDataUrl = canvas.toDataURL(imgFile.type, 1);
 93         }
 94 
 95         callback(compressedDataUrl);
 96     }
 97 }
 98 
 99 function processData (dataURL) {
100     // 這裏使用二進制方式處理dataURL
101     const binaryString = window.atob(dataURL.split(',')[1]);
102     const arrayBuffer = new ArrayBuffer(binaryString.length);
103     const intArray = new Uint8Array(arrayBuffer);
104     const imgFile = this.imgFile;
105 
106     for (let i = 0, j = binaryString.length; i < j; i++) {
107         intArray[i] = binaryString.charCodeAt(i);
108     }
109 
110     const data = [intArray];
111 
112     let blob;
113 
114     try {
115         blob = new Blob(data, { type: imgFile.type });
116     } catch (error) {
117         window.BlobBuilder = window.BlobBuilder ||
118             window.WebKitBlobBuilder ||
119             window.MozBlobBuilder ||
120             window.MSBlobBuilder;
121         if (error.name === 'TypeError' && window.BlobBuilder){
122             const builder = new BlobBuilder();
123             builder.append(arrayBuffer);
124             blob = builder.getBlob(imgFile.type);
125         } else {
126             // Toast.error("版本太低，不支持上傳圖片", 2000, undefined, false);
127             throw new Error('版本太低，不支持上傳圖片');
128         }
129     }
130 
131     // blob 轉file
132     const fileOfBlob = new File([blob], imgFile.name, {type: "image/jpg"});
133     const formData = new FormData();
134 
135     // type
136     formData.append('type', imgFile.type);
137     // size
138     formData.append('size', fileOfBlob.size);
139     // name
140     formData.append('name', imgFile.name);
141     // lastModifiedDate
142     formData.append('lastModifiedDate', imgFile.lastModifiedDate);
143     // append 文件
144     formData.append('file', fileOfBlob);
145     console.log(formData);
146 
147     // uploadImg(formData);
148     UploadImgAjax(formData);
149 }
150 
151 function UploadImgAjax(formData){
152     $.ajax({
153         url: '/community/upload',
154         type: 'POST',
155         data: formData,                    // 上傳formdata封裝的數據
156         dataType: 'JSON',
157         cache: false,                      // 不緩存
158         processData: false,                // jQuery不要去處理髮送的數據
159         contentType: false,                // jQuery不要去設置Content-Type請求頭
160         success:function (ret) {          //成功回調
161             var img = ret.pic;
162             if(inputImgUrl){
163               inputImgUrl += "," + ret.pic;
164             }else{
165               inputImgUrl = ret.pic;
166             }
167             $('.add').before("<span><i class='omit'></i><img src='"+img+"'/></span>");
168             $('#img').val(inputImgUrl);
169         },
170         error: function(){
171             console.log("error");
172             toastr.error(ret.message);
173         }
174     });
175 }

View Code