里JavaScript+canvas实现在线转换图片格式的功能-创新互联

这期内容当中小编将会给大家带来有关里JavaScript+canvas实现在线转换图片格式的功能，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。

按需定制可以根据自己的需求进行定制，网站建设、成都网站建设构思过程中功能建设理应排到主要部位公司网站建设、成都网站建设的运用实际效果公司网站制作网站建立与制做的实际意义

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

实现思路：
实现这样的功能，使用后端语言【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 的区间内选择图片的质量。如果超出取值范围，将会使用默认值 0.92。其他参数会被忽略。

注意点：

1、如果画布的高度或宽度是0，那么会返回字符串“data:,”。

2、其中webkit内核浏览器支持“image/webp”类型 。 建议使用Chrome浏览器。

代码例子：

html:

	webp格式
  jpeg格式
  png格式 

开始转换
预览：

本文标题：里JavaScript+canvas实现在线转换图片格式的功能-创新互联
当前路径：http://cdiso.cn/article/ispic.html