如何将任何图像转换为 webp？

Question

有什么方法可以使用 filepond 将任何图像转换为 webp 吗？

这是我的代码：

import vueFilePond, { setOptions } from 'vue-filepond'

// ...

setOptions({
  server: {
    process: (field, file) => {
      file.name = String(file.name.substr(0, file.name.lastIndexOf('.'))) + '.webp';
      file.type = 'image/webp';
      // ... upload to firebase storage
    }
  }
})

无法分配给对象“#”的只读属性“名称”

Answer 1

您不能“仅”更改文件的名称和类型并完成它。

1. 文件名和类型是只读的，您必须基于旧文件创建一个新文件，然后可以分配新的名称和类型。

const myRenamedFile = new File([myOriginalFile], 'my-new-name');

有关重命名文件的更多信息

2. 更改type属性不会更改实际的文件数据。将 a 重命名.png为.jpeg，文件数据（bits）仍将是 JPEG 压缩图像。

要转换数据，您需要读取原始文件，然后将其转换为格式WEBP。您可以.toBlob()使用 canvas 元素上可用的方法来执行此操作。

const myRenamedFile = new File([myOriginalFile], 'my-new-name');

显然，创建 WEBP 图像不适用于 Safari 13.x、IE11 和 Edge 17 等不支持 WEBP 的浏览器。Firefox 自 2019 年初开始提供支持，Chrome 也已经支持 WEBP 很长时间了。

如果您需要支持这些浏览器，您可以使用单独的 JavaScript 库来进行图像编码。例如webpjs。