压缩图片

一般结合 canvas

base64转file

dataURLtoFile (dataurl,name ){
            var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
            while(n--){
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new File([u8arr],name,{type:mime});

压缩

// 大于1MB的jpeg和png图片都缩小像素上传
                if(//(?:jpeg|png|jpg|bmp)/i.test(file.file.type)&&file.file.size>1000000) {
                    // 创建Canvas对象(画布)
                    let canvas =  document.createElement('canvas')  
                    // 获取对应的CanvasRenderingContext2D对象(画笔)
                    let context = canvas.getContext('2d') 
                    // 创建新的图片对象 
                    let img = new Image()
                    // 指定图片的DataURL(图片的base64编码数据)
                    img.src = file.content
                    //画布宽度
                    let width = 512   
                    // 监听浏览器加载图片完成，然后进行绘制
                    img.onload = () => {
                        //画布大小按照图片的比例生成
                        let height = width / (img.naturalWidth / img.naturalHeight)
                        // 指定canvas画布大小，该大小为最后生成图片的大小
                        canvas.width = width
                        canvas.height = height
                        /* drawImage画布绘制的方法。(0,0)表示以Canvas画布左上角为起点， canvas.width, canvas.height 是将图片按给定的像素进行缩小。*/
                        /* 如果不指定缩小的像素，图片将以图片原始大小进行绘制，图片像素如果大于画布将会从左上角开始按画布大小部分绘制图片，最后得到的图片就是张局部图。图片小于画布就会有黑边。*/ 
                        context.drawImage(img, 0, 0, canvas.width, canvas.height)
                        // 将绘制完成的图片重新转化为base64编码，file.file.type为图片类型，0.92为默认压缩质量
                        file.content = canvas.toDataURL(file.file.type, 0.92) 
                        //将base64编码的图片转成文件(file)格式,名字传入
                        
                        this.dataURLtoFile(file.content,file.file.name)
                        
                    }                       
           }else{
}