vant提交图片的时候，前端压缩图片

最新推荐文章于 2022-12-01 15:22:06 发布

原创最新推荐文章于 2022-12-01 15:22:06 发布 · 233 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js

本文介绍了一种利用HTML5的Canvas元素进行图片处理的方法。具体步骤包括：加载图片到Canvas上，调整尺寸并裁切，最后将Canvas的内容转换回图片格式以便进一步使用或上传。该方法适用于需要对用户上传的图片进行预处理的应用场景。

主要是使用canvas将图片画出来然后裁切好，最后将canvas的图转成图片

HTML代码

<van-uploader max-size="5242880" :after-read="afterRead"  v-model="picList" multiple deletable  upload-text="222222"/>

JS代码

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/2
          canvas.height = img.height/2
          context.drawImage(img, 0, 0, img.width/2, img.height/2)
          file.content = canvas.toDataURL(file.file.type, 0.92) // 0.92为默认压缩质量

        }
        console.log(this.picList,'222222222222222222222222222222')
      },