如何使用toDataURL创建无损WebP图像？

Question

我正在使用 canvas 元素在 Chrome 中尝试 WebP 图像格式。在 MDN 上，我看到

toDataURL

接受代表结果图像质量的第二个参数。

我想生成画布元素的无损 WebP 图像。但是，如果我通过

1

来保证质量（即 100%），我不会得到完全相同的像素。看起来它正在生成有损图像。

这是一个测试用例：http://jsfiddle.net/Nf5ve/1/。绘制PNG图像时，某个像素的某种颜色的值为40。在画布本身上绘制100％质量的WebP图像后，相同的值已更改为37。这对我来说似乎不是无损的，即使虽然我的质量通过了100%。

是否可以让

toDataURL

创建无损 WebP 图像？如果可以，如何创建？

Answer 1

webp 没有官方的 MIME 类型，所以现在对此持保留态度。

在

toDataURL

中的 chrome 上使用“image/webp”现在总是会导致有损 webp 图像，即使质量为“1”

目前似乎没有办法获得无损的webP图像

Answer 2

我测试并确认

image/webp-lossless

这些天在 Chrome 中可以正常工作。只需使用它代替

image/webp

该问题似乎已于 2016 年得到解决。

我用来测试的图像在有损 webp 时颜色不正确，现在颜色是正确的。

为了确定它确实是

webp

而不是

png

我在 Linux 上使用了以下内容，其中文件名是

webptest

❯ file webptest
webptest: RIFF (little-endian) data, Web/P image

编辑：嗯……但是从

toDataURL

返回的值是

image/png

所以现在我不知道该怎么想。但该文件的大小与我从 Sharp 创建的文件大小相同，这当然是

webp

...