如何使用JavaScript Canvas实现图片格式WebPPNGJPEG在线转换？

本文共计743个文字，预计阅读时间需要3分钟。

功能需求：在网页上上传一张图片，选择不同的格式，将图片转换为相应的格式。实现思路：使用前端语言（如HTML、JavaScript）实现图片上传和格式选择功能，后端语言（如PHP、Java）处理图片转换。

功能需求：
我们在网页中上传一张图片，选择不同的格式，将该图片转换为对应的格式。

实现思路：
实现这样的功能，使用后端语言可以很容易的完成。但是如果只在前端如何完成呢？

1、通过input上传图片，使用FileReader将文件读取到内存中。

2、将图片转换为canvas，canvas.toDataURL()方法设置为我们需要的格式，如："image/webp","image/jpeg","image/png"。

3、最后将canvas转换为图片，显示在网页中。点击右键保存，就得到了不同格式的图片了。

toDataURL说明：
方法返回一个包含图片展示的 data URI 。可以使用 type 参数其类型，默认为 PNG 格式。图片的分辨率为96dpi。

语法：

canvas.toDataURL(type, encoderOptions);

type 图片格式，默认为 image/png，可选格式："image/webp","image/jpeg","image/png"。

encoderOptions在指定图片格式为 image/jpeg 或 image/webp的情况下，可以从 0 到 1 的区间内选择图片的质量。