前端JS压缩图片 Blob canvas

input拿到选择的图片文件 => 利用FileReader读取图片文件 => 创建canvas并绘制（drawImage）图片（可等比压缩尺寸），canvas.toBlob(callback, type, quality) 压缩质量 

<input type="file" accept="image/*" @change="inputChange">

function inputChange(e:any){
    //1 input拿到文件
    let file = e.target.files[0]    let file = e.target.files[0]    
    //2 fileReader 读取文件    
    const reader = new FileReader()    
    reader.readAsDataURL(file)
    reader.onload = function(e:any){      
        img.src = e ? e.target.result : ''      
        img.onload = function(){         
            let { width, height} = img         
            // 计算宽高比 ...               
            // 创建canvas画布         
            const canvas = document.createElement('canvas')         
            const context = canvas.getContext('2d')
            //压缩尺寸 为方便这里直接/2         
            width = width/2         
            height = height/2         
            canvas.width = width         
            canvas.height = height         
            context?.clearRect(0,0, width, height)         
            context?.drawImage(img, 0,0 ,width, height)         
            // 转成blob         
            canvas.toBlob((blob)=>console.log('size',blob?.size), 'image/png', 0.5)        
            此处blob为压缩后的文件  0.5为图片质量      };
}