前端上传图片前压缩并预览vue+canvans

做个随笔，怕我忘了，参考链接为https://blog.csdn.net/qq_40816649/article/details/88393825

框架vant，组件代码为

      

             
             

                      
                      身份证正面(带人像)
              
       
 

如果用的原生的就是input file那种的其实也一样
然后在method里,这个是压缩图片代码

compress(img){
            let url = ''
            var w = Math.min(700, img.width);//当图片像素>700的时候，等比例压缩，这个数字可以调
            var h = img.height * (w / img.width);
            var canvas = document.createElement('canvas')
            var ctx = canvas.getContext('2d')
            canvas.width = w
            canvas.height = h
            ctx.drawImage(img, 0, 0, w, h)
            url = canvas.toDataURL('image/png',1)//1代表精细度，越高越好
            return url
        },

然后onread事件里，这个事件是vant定义的，其中的file就是file文件，跟原生的file事件一样的，如果用的是input file同理

onRead(file) {
            let that = this
            let img = new Image()//创建对象，这个img就是传给上面的compress
            img.src = file.content
            let reader = new FileReader()
            reader.readAsDataURL(file.file)
            img.onload = function (){//回调
                let id_card = that.compress(img)//这个id_card就是压缩后的一串base64代码，目测3M图片压缩后800kb
                that.$toast.loading({
                    duration: 0,
                    message: '上传中...',
                    loadingType: 'spinner'
                })
                
                //这下面写接口，这里传base64格式给后台
            }
        },