vue 图片指定大小压缩

原创已于 2023-05-04 16:48:21 修改 · 1.1k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #javascript #npm

于 2023-05-04 16:44:35 首次发布

文章介绍了一个使用npm包image-conversion进行图片处理的方法，包括安装、引入和使用。当图片大小超过限制时，会进行压缩。代码示例展示了如何监听上传图片数组的变化，对每张图片进行处理，转换为Base64格式。

1.安装命令

 npm i image-conversion --save

2.引入插件
import * as imageConversion from "image-conversion";

  //  
  <div class="upload">
                <van-uploader
                  accept="image/*"
                  v-model="imgList"
                  multiple
                  :max-count="5"
                  :max-size="8 * 1024 * 1024"
                  @oversize="onOversize"
                />
    </div>

 //methods
  async handeImg(img) {
      // 小于2M直接转成bolb对象 大于两m压缩成2000kb左右
      let data = null;
      if (img.size < 1 * 1024 * 1024) {
        data = new Blob([img], { type: img.type });
      } else {
        data = await imageConversion.compressAccurately(img, 2000);
      }
      const base64 = await imageConversion.filetoDataURL(data);
      return base64;
    },


  //监听 imgList上传数组

    watch: {
    async imgList(Nval) {
      try {
        this.certficationImage1 =
          Nval[0] && (await this.handeImg(Nval[0].file));
        this.certficationImage2 =
          Nval[1] && (await this.handeImg(Nval[1].file));
        this.certficationImage3 =
          Nval[2] && (await this.handeImg(Nval[2].file));
        this.certficationImage4 =
          Nval[3] && (await this.handeImg(Nval[3].file));
        this.certficationImage5 =
          Nval[4] && (await this.handeImg(Nval[4].file));
      } catch (error) {
        console.log(error);
      }
    }
}