JS webAPP圖片壓縮

邏輯大概：

1. 取到input type="file" 文件流 （ onchange事件內會返回 ）  

2.而後使用     new FileReader()     對象的   readAsDataURL(file)    方法把文件流轉換成base64格式  

3.最後使用canvas裏面的方法進行壓縮 （壓縮完會返回一個base64格式圖片）

 1 //獲取input
 2 let dom = document.getElementById('test-input')
 3 //綁定onchange事件
 4     dom.onchange = function(event) {
 5         //在選擇文件以後觸發該方法，獲取到文件流變量，數組類型
 6         var files = event.target.files
 7     }
 8 
 9 //好比只須要第一張圖片
10 var singleFile = files[0]
11 
12 //轉碼 使用 FileReader
13 var reader = new FileReader();
14 
15 //singleFile單個文件流做爲參數傳入進行解析
16 reader.readAsDataURL(singleFile)
17 
18 //reader在onload事件裏就會返回解析後的base64格式
19 reader.onload = function(){
20     var resBase64 = this.result;
21 }
22 
23 //接下來就是經過canvas來解析了
24 //首先得建立一個image對象存放以前解析的base64
25 var img = new image();
26 img.src = resBase64
27 img.onload = function() {
28     //在確保img加載完成後執行代碼
29     //建立一個canvas和畫布
30     var canvas = document.createElement('canvas')
31     var ctx = canvas.getContext('2d')
32     //從新計算圖片的寬度高度分辨率
33     //由於img加載完成，因此能夠直接獲取到原始的圖片寬高
34     var wid = this.width
35     var hei = this.height 
36     //計算他的比例
37     var rate = wid/hei
38     //由於拍攝的圖片比較大，因此須要按比例進行縮小
39     //我這裏給定了，讓他的寬爲700,
40     wid = 700
41     hei = 700 / rate
42    //而後給canvas的寬高賦計算後的值
43     canvas.width = wid
44     canvas.height = hei
45    //開始畫
46     ctx.drawImage(this, 0, 0, wid, hei);
47 
48    
49     var quality = 1 //值越小越模糊
50      //生成base64
51     var calBase64 = canvas.toDataURL('image/jpeg', quality);
52 }