vant上传图片时压缩图片

最新推荐文章于 2024-08-14 02:28:59 发布

Dlow-

最新推荐文章于 2024-08-14 02:28:59 发布

阅读量1.4k

点赞数

本文链接：https://blog.csdn.net/qq_24992475/article/details/118107886

版权

本文介绍了在使用Vant上传图片时如何应对宽高限制，通过压缩图片来满足要求。内容涉及将base64编码的图片转换为file文件的过程。

摘要由CSDN通过智能技术生成

vant上传图片，有图片的宽高大小限制，可以上传时压缩图片，在这里记录一下。

压缩图片大小

afterRead(file){
        console.log(file,'0000')
        this.face = [];
        let canvas = document.createElement('canvas') // 创建Canvas对象(画布)
        let context = canvas.getContext('2d')
        let img = new Image()
        img.src = file.content // 指定图片的DataURL(图片的base64编码数据)
        img.onload = () => {
          canvas.width = img.width/10
          canvas.height = img.height/10
          context.drawImage(img, 0, 0, img.width/10, img.height/10)
          file.content = canvas.toDataURL(file.file.type, 0.92) // 0.92为默认压缩质量
          console.log(file,file.content,'4444444')
          let files = this.dataURLtoFile(file.content, file.file.name)
          console.log(files,'33333')
          this.uploadToqiniu(files,this.face);
        }
      },