vue-cropperjs 获取剪辑后的图片格式如何转为文件流的形式

将 base64 格式的字符串转换为文件流的形式，可以借助 Blob 对象实现。Blob 对象表示一个不可变、原始数据的类文件对象，可以使用它来存储二进制数据。具体步骤如下：

1. 将 base64 格式的字符串转换为二进制数据。可以使用 atob() 方法将 base64 字符串解码为二进制数据。

const binaryStr = atob(dataUrl.split(',')[1]);

2. 创建一个 Uint8Array 对象来存储二进制数据。

const len = binaryStr.length;
const bytes = new Uint8Array(len);
for (let i = 0; i < len; i++) {
  bytes[i] = binaryStr.charCodeAt(i);
}

3. 使用 Blob 对象将二进制数据转换为文件流的形式。

const blob = new Blob([bytes], { type: 'image/png' });

完整代码如下：

<template>
  <vue-cropper
    ref="cropper"
    ...
    @cropped="getCroppedData"
  />
</template>

<script>
export default {
  methods: {
    getCroppedData(dataUrl) {
      const binaryStr = atob(dataUrl.split(',')[1]);
      const len = binaryStr.length;
      const bytes = new Uint8Array(len);
      for (let i = 0; i < len; i++) {
        bytes[i] = binaryStr.charCodeAt(i);
      }
      const blob = new Blob([bytes], { type: 'image/png' });
      console.log(blob);
      // blob 即为剪辑后的图片数据，格式为文件流的形式
    }
  }
}
</script>

注意：在使用 Blob 对象时，需要指定 MIME 类型。可以根据剪辑后的图片格式来确定 MIME 类型，例如上面示例中使用的是 `image/png`。