vue開發中vue-resource + canvas 圖片壓縮、上傳、預覽

一、使用vue-resource上傳，也能夠自定義ajax上傳；

二、使用<input type="file" @change="submit()" name="multipart" class="element" accept="image/*" id="headerImage">標籤，在submit的時候執行方法

三、正式代碼  let oFiles = document.querySelector("#headerImage").files;　

四、壓縮圖片：

 1 modify_img_size (path, obj, callback) {
 2 
 3 //path能夠是相對路徑，也能夠是base64位，我這裏傳的是bse64位
 4         var img = new Image();
 5         img.src = path;
 6 
 7         img.onload = function () {
 8 //圖片加載初始化執行
 9 
10           var that = this;
11           var w = that.width,
12 
13             h = that.height,
14             scale = w / h;
15           w = obj.width || w;
16           h = obj.height || (w / scale);
17 //圖片的質量爲0.5，越小越模糊，文件也就越小
18           var quality = 0.5;   
19 
20           //建立canvas畫圖
21           var canvas = document.createElement('canvas');
22           var ctx = canvas.getContext('2d');
23 
24           var anw = document.createAttribute("width");
25           anw.nodeValue = w;
26           var anh = document.createAttribute("height");
27           anh.nodeValue = h;
28           canvas.setAttributeNode(anw);
29           canvas.setAttributeNode(anh);
30 
31           ctx.drawImage(that, 0, 0, w, h);
32 
33           if (obj.quality && obj.quality <= 1 && obj.quality > 0) {
34             quality = obj.quality;
35           }
36        
37           var base64 = canvas.toDataURL('image/jpeg', quality);
38 
39           callback(base64);
40         }
41 
42       }

 

五、讀取二進制（base64位信息），let zipReady = new FileReader();      zipReady.readAsDataURL(oFiles[0]);   初始化讀取base64，上傳、預覽：

 1  let _that = this;    
 2 
 3         zipReady.onload = function (e) {     //初始化開始
 4 
 5 //調用壓縮方法，e.target.result爲壓縮結果 ， {width: 1000}爲壓縮後寬度，resImg爲壓縮以後的base64位回調函數結果
 6 
 7           _that.modify_img_size(e.target.result, {width: 1000}, function (resImg) {
 8 
 9 
10 //轉爲8 位無符號整數值的類型化數組，存爲圖片信息，有返回值
11             function dataURItoBlob(dataURI) {  
12 
13            
14               var byteString;
15               if (dataURI.split(',')[0].indexOf('base64') >= 0)
16                 byteString = atob(dataURI.split(',')[1]);
17               else
18                 byteString = unescape(dataURI.split(',')[1]);
19               // separate out the mime component
20               var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
21               // write the bytes of the string to a typed array
22               var ia = new Uint8Array(byteString.length);
23               for (var i = 0; i < byteString.length; i++) {
24                 ia[i] = byteString.charCodeAt(i);
25               }
26 
27               console.info(ia);
28               return new Blob([ia], {type:mimeString});
29             }
30 
31 //**********************************************************
32 
33 
34             var blob = dataURItoBlob(resImg);    //將base64作處理
35 
36 
37             let formDataImg = new FormData();
38 
39             formDataImg.append('multipart', blob, oFiles[0].name);
40 //將從內存中讀取處理以後的數據流blob插入form表單中，記得要給它取個名字，不然後端不能識別，我這裏去的是原始圖片的名字
41 
42             formDataImg.append('accessToken', aToken);
43 
44 //若是查過2M則提示圖片太大，返回
45             if (resImg.length > 2097152) {
46 
47               Toast(_that.$t('message.myInfo.tobig'))
48 
49               return true
50             }
51 
52 
53 //        預覽圖片，用戶選擇一次不滿意，要重先選擇，則要刪掉這個img標籤，重先建立一個img
54             let getTempImgNode = document.getElementById('tempImg');
55             if (getTempImgNode) {
56               getTempImgNode.remove();
57 
58             }
59 
60 
61             HTTP.postImg('/gate/v1/userExpandInfo/updateHeadPortrait', formDataImg).then(res => {
62           
63               if (res.code == 0) {
64         
65 
66 //上傳成功以後，再次讀取base64信息，建立img，生成預覽
67                 let rdader = new FileReader();
68                 rdader.readAsDataURL(oFiles[0]);
69 
70                 rdader.onload = function (e) {
71 
72                   let getPicParent = document.getElementById('changePic');
73                   let newNode = document.createElement('img');
74                   newNode.setAttribute('id', 'tempImg');
75                   newNode.setAttribute('src', e.target.result);
76 
77                   getPicParent.appendChild(newNode)
78 
79                 };
80 
81 
82                 return true;
83               } else {
84                 Toast(_that.$t('message.code[' + res.code + ']'));
85 
86               }
87 
88             })
89 
90           })
91 
92         };