【前端】压缩图片以及图片相关概念

压缩图片思路

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. 分辨率：同尺寸