JS webAPP图片压缩

逻辑大概：

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

2.然后使用     new FileReader()     对象的   readAsDataURL(file)    方法把文件流转换成base64格式  

3.最后使用canvas里面的方法进行压缩 （压缩完会返回一个base64格式图片）

//获取input
let dom = document.getElementById('test-input')
//绑定onchange事件
    dom.onchange = function(event) {
        //在选择文件之后触发该方法，获取到文件流变量，数组类型
        var files = event.target.files
    }

//比如只需要第一张图片
var singleFile = files[0]

//转码 使用 FileReader
var reader = new FileReader();

//singleFile单个文件流作为参数传入进行解析
reader.readAsDataURL(singleFile)

//reader在onload事件里就会返回解析后的base64格式
reader.onload = function(){
    var resBase64 = this.result;
}

//接下来就是通过canvas来解析了
//首先得创建一个image对象存放之前解析的base64
var img = new image();
img.src = resBase64
img.onload = function() {
    //在确保img加载完成后执行代码
    //创建一个canvas和画布
    var canvas = document.createElement('canvas')
    var ctx = canvas.getContext('2d')
    //重新计算图片的宽度高度分辨率
    //因为img加载完成，所以可以直接获取到原始的图片宽高
    var wid = this.width
    var hei = this.height 
    //计算他的比例
    var rate = wid/hei
    //因为拍摄的图片比较大，所以需要按比例进行缩小
    //我这里给定了，让他的宽为700,
    wid = 700
    hei = 700 / rate
   //然后给canvas的宽高赋计算后的值
    canvas.width = wid
    canvas.height = hei
   //开始画
    ctx.drawImage(this, 0, 0, wid, hei);

   
    var quality = 1 //值越小越模糊
     //生成base64
    var calBase64 = canvas.toDataURL('image/jpeg', quality);
}