vant 图片上传压缩方法

Vant图片上传组件提供了多种压缩方法，以便快速上传和减少网络流量使用。以下是其中几种方法：

1. quality：通过控制图片质量来实现压缩。设置较低的图片质量可以减小文件大小。建议使用0-1之间的小数来设置质量值。默认值为0.92。

2. maxWidth 和 maxHeight：通过限制图片的最大宽度和高度来实现压缩，从而减小文件大小。如果原始图片尺寸小于指定的最大值，则不会进行压缩。建议设置为屏幕宽度的一半左右。

3. resize：通过指定图片的宽度和高度来实现压缩，从而减小文件大小。可以通过设置宽度或高度中的一个值，并将另一个值设置为0来保持图片的宽高比。默认情况下，该选项不启用。

4. format：通过将图片格式从PNG或JPG转换为WebP格式来实现压缩。WebP格式可以实现更好的压缩率，同时保持较高的图片质量。建议兼容的情况下启用。

总的来说，压缩图片可以提高上传速度和减少网络流量消耗，但同时也会降低图片质量。因此，为了平衡这两个因素，建议尝试不同的压缩方法，找到适合自己应用场景的最佳方案。

相关问题

VUE VANT上传图片 压缩

在Vue前端开发中，可以使用Vant组件库中的Uploader组件来实现图片上传功能。同时，为了减小上传文件的大小，可以使用JavaScript中的canvas API对图片进行压缩处理。具体步骤如下：
1. 在Vue项目中引入Vant组件库和exif-js库。
2. 在Uploader组件中设置上传图片的最大尺寸和格式。
3. 在上传前，使用exif-js库获取图片的方向参数，并根据方向参数对图片进行旋转。
4. 使用canvas API对图片进行压缩处理，并将压缩后的图片上传至服务器。

代码示例：

<template>
  <van-uploader
    :max-size="2 * 1024 * 1024"
    :accept="['jpg', 'jpeg', 'png']"
    :before-upload="beforeUpload"
    :on-success="onSuccess"
  />
</template>

<script>
import EXIF from 'exif-js';
import { Toast } from 'vant';

export default {
  methods: {
    beforeUpload(file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = (event) => {
          const img = new Image();
          img.src = event.target.result;
          img.onload = () => {
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');
            let width = img.width;
            let height = img.height;
            let orientation = 1;
            EXIF.getData(file, function() {
              orientation = EXIF.getTag(this, 'Orientation');
            });
            if ([5, 6, 7, 8].indexOf(orientation) > -1) {
              canvas.width = height;
              canvas.height = width;
            } else {
              canvas.width = width;
              canvas.height = height;
            }
            switch (orientation) {
              case 2:
                ctx.transform(-1, 0, 0, 1, width, 0);
                break;
              case 3:
                ctx.transform(-1, 0, 0, -1, width, height);
                break;
              case 4:
                ctx.transform(1, 0, 0, -1, 0, height);
                break;
              case 5:
                ctx.transform(0, 1, 1, 0, 0, 0);
                break;
              case 6:
                ctx.transform(0, 1, -1, 0, height, 0);
                break;
              case 7:
                ctx.transform(0, -1, -1, 0, height, width);
                break;
              case 8:
                ctx.transform(0, -1, 1, 0, 0, width);
                break;
              default:
                break;
            }
            ctx.drawImage(img, 0, 0, width, height);
            const base64 = canvas.toDataURL('image/jpeg', 0.8);
            const blob = this.dataURLtoBlob(base64);
            resolve(blob);
          };
        };
      });
    },
    onSuccess(response) {
      Toast.success('上传成功');
    },
    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>

vant上传视频压缩

在vant上传视频时，压缩的步骤如下：
1. 首先，上传组件会触发before-read方法。
2. 在before-read方法中，会将文件流转换为base64格式。
3. 转换为base64后，会调用compressImg方法对图片进行压缩。
4. 在compressImg方法中，会创建一个canvas画布，并将图片绘制到画布上。
5. 绘制完成后，将画布转换为base64格式。
6. 最后，将base64转换为文件流，并生成新的文件流对象，完成压缩操作。

总结来说，vant上传视频时，会先将视频文件流转换为base64格式，然后通过压缩算法对视频进行压缩，最终生成新的文件流对象。这样就完成了视频的压缩操作。<em>1</em><em>2</em><em>3</em>
#### 引用[.reference_title]
- *1* *2* *3* [前端vue+vant上传文件前,对图片、文件压缩](https://blog.csdn.net/madegechoubi/article/details/129855937)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}} ] [.reference_item]
[ .reference_list ]