van-uploader 压缩图片

复制代码
在使用 van-uploader 组件上传图片时,如果需要在客户端进行图片压缩,可以使用JavaScript的 Canvas API来实现。以下是一个简单的示例,展示了如何在上传之前对图片进行压缩:

html
<template>
  <van-uploader
    v-model="fileList"
    :after-read="compressImage"
    accept="image/*"
  />
</template>

<script>
export default {
  data() {
    return {
      fileList: [],
    };
  },
  methods: {
    compressImage(file) {
      // 创建FileReader对象
      const reader = new FileReader();
      reader.readAsDataURL(file);

      reader.onload = (e) => {
        const img = new Image();
        img.src = e.target.result;

        img.onload = () => {
          // 设置压缩比例
          const quality = 0.7; // 压缩比例
          const canvas = document.createElement('canvas');
          const ctx = canvas.getContext('2d');
          const width = img.width;
          const height = img.height;

          canvas.width = width;
          canvas.height = height;
          ctx.drawImage(img, 0, 0, width, height);

          // 获取压缩后的图片
          const newImageData = canvas.toDataURL('image/jpeg', quality);

          // 创建新的Blob对象
          const blob = this.dataURLtoBlob(newImageData);
          const file = new File([blob], 'compressed_image.jpg', {
            type: 'image/jpeg',
          });

          // 使用压缩后的文件进行上传
          this.fileList = [file];
        };
      };
    },
    dataURLtoBlob(dataurl) {
      const arr = dataurl.split(',');
      const mime = arr[0].match(/:(.*?);/)[1];
      const bstr = atob(arr[1]);
      let n = bstr.length;
      const u8arr = new Uint8Array(n);

      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }

      return new Blob([u8arr], { type: mime });
    },
  },
};
</script>

在这个示例中,compressImage 方法会在用户选择图片后被调用。它首先创建了一个 FileReader 对象来读取图片文件。当文件读取完毕后,它会在 img.onload 事件中使用 Canvas 进行图片压缩,并重新创建一个 File 对象用于上传。
复制代码

 

posted @   蓝色精灵jah  阅读(367)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
历史上的今天:
2022-03-18 element el-steps步骤条点击事件
点击右上角即可分享
微信分享提示