【前端】壓縮圖片以及圖片相關概念

壓縮圖片思路

1. 獲得上傳檔案
2. 上傳檔案型別為file 或者blod（這兩個都是）
3. 將file轉成base64
4. base64壓縮圖片
5. base64轉成file，判斷大小，返回壓縮後的圖片大小

流程：
1.獲得上傳檔案：

<input id="selectImage" type="file" onchange="selectImg(this)" accept="image/*"/>
 function selectImg(event) {
            var f = event.files[0];
            if (f==undefined) {
                return;
            }
            var name = f.name;
            var size=f.size;
 }

2.壓縮圖片

if (!file || !window.FileReader) return;
var image = new Image();
image.onload = function () {
            var canvas = document.createElement('canvas');
            var ctx = canvas.getContext('2d');
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            canvas.width = image.width * nextQ; //nextQ取值範圍0-1：圖片質量
            canvas.height = image.height * nextQ;
            ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
            var base64Codes = canvas.toDataURL(file.type, nextQ); 
        };
      
        if (/^image/.test(file.type)) {
            // 建立一個reader
            var reader = new FileReader();
            // 將圖片將轉成 base64 格式
            reader.readAsDataURL(file);
            // 讀取成功後的回撥
            reader.onload = function () {
                image.src = this.result;
            }
        }

3.base64轉成file，判斷大小

var compressFile = self.dataUrlToFile(base64Codes, file.name.split('.')[0]); 
var compressFileSize = compressFile.size; 

ps:
1.input 的accept屬性如果限制圖片型別，可能導致某些安卓機沒辦法上傳圖片，上述寫法可以解決問題

2.程式碼參考連結：js圖片大小壓縮到指定範圍

自定義概念

1. 大小：圖片具體多少kb，佔多少位元組
2. 尺寸：圖片的高度和寬度
3. 畫素：圖片尺寸的單位
4. 解析度：同尺寸