js+canvas实现图片格式webp/png/jpeg在线转换


Posted in Javascript onAugust 22, 2020

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

实现思路:
实现这样的功能,使用后端语言【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:

<input type="file" id="inputimg">
<select id="myselect">
	<option value="1">webp格式</option>
  <option value="2">jpeg格式</option>
  <option value="3">png格式</option> 
</select>
<button id="start">开始转换</button>
<p>预览:</p>
<img id="imgShow" src="" alt="">

js:

/*事件*/
document.getElementById('start').addEventListener('click', function(){
	getImg(function(image){
		var can=imgToCanvas(image),
		  imgshow=document.getElementById("imgShow");
		imgshow.setAttribute('src',canvasToImg(can));
	});
});
// 把image 转换为 canvas对象 
function imgToCanvas(image) { 	
  var canvas = document.createElement("canvas"); 
  canvas.width = image.width; 
  canvas.height = image.height;  
  canvas.getContext("2d").drawImage(image, 0, 0);  
  return canvas; 
} 
//canvas转换为image
function canvasToImg(canvas) {
	var array=["image/webp","image/jpeg","image/png"],
	  type=document.getElementById('myselect').value-1;
  var src = canvas.toDataURL(array[type]);
  return src;
}
//获取图片信息
function getImg(fn){
	var imgFile = new FileReader();
	try{
		imgFile.onload = function(e) {
			var image = new Image();
			image.src= e.target.result; //base64数据 
			image.onload=function(){
				fn(image);
			}
		}
		imgFile.readAsDataURL(document.getElementById('inputimg').files[0]);
	}catch(e){
		console.log("请上传图片!"+e);
	}
}

在线Demo:

地址:https://3water.com/tools/webp.html

说明:需要在chrome浏览器中使用,大家可以自行发挥可以做个批量转换。

到此这篇关于js+canvas实现图片格式webp/png/jpeg在线转换的文章就介绍到这了,更多相关webp/png/jpeg在线转换内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
提高代码性能技巧谈—以创建千行表格为例
Jul 01 Javascript
jquery 插件实现图片延迟加载效果代码
Feb 06 Javascript
transport.js和jquery冲突问题的解决方法
Feb 10 Javascript
jQuery技巧之让任何组件都支持类似DOM的事件管理
Apr 05 Javascript
使用Object.defineProperty实现简单的js双向绑定
Apr 15 Javascript
JS实现HTML表格排序功能
Aug 05 Javascript
BootStrap table使用方法分析
Nov 08 Javascript
移动端手指放大缩小插件与js源码
May 22 Javascript
详解基于 Nuxt 的 Vue.js 服务端渲染实践
Oct 24 Javascript
vue-cli 组件的导入与使用教程详解
Apr 11 Javascript
JavaScript如何优化逻辑判断代码详解
Jun 08 Javascript
如何用vue实现网页截图你知道吗
Nov 17 Vue.js
JavaScript中的函数式编程详解
Aug 22 #Javascript
微信小程序中data-key属性之数据传输(经验总结)
Aug 22 #Javascript
Vue 电商后台管理项目阶段性总结(推荐)
Aug 22 #Javascript
vue实现移动端H5数字键盘组件使用详解
Aug 25 #Javascript
探究一道价值25k的蚂蚁金服异步串行面试题
Aug 21 #Javascript
js实现页面导航层级指示效果
Aug 25 #Javascript
js实现拖拽元素选择和删除
Aug 25 #Javascript
You might like
索尼SONY ICF-7600A(W)电路分析
2021/03/01 无线电
php 根据url自动生成缩略图并处理高并发问题
2014/01/23 PHP
php绘制一个矩形的方法
2015/01/24 PHP
浅析PHP中的i++与++i的区别及效率
2016/06/15 PHP
PHP 的Opcache加速的使用方法
2017/12/29 PHP
jquery miniui 教程 表格控件 合并单元格应用
2012/11/25 Javascript
javascript 获取元素样式必杀技
2014/05/04 Javascript
JavaScript中获取鼠标位置相关属性总结
2014/10/11 Javascript
纯js模拟div层弹性运动的方法
2015/07/27 Javascript
node.js express中app.param的用法详解
2017/07/16 Javascript
关于jquery form表单序列化的注意事项详解
2017/08/01 jQuery
Vue中组件之间数据的传递的示例代码
2017/09/08 Javascript
基于datepicker定义自己的angular时间组件的示例
2018/03/14 Javascript
Layui组件Table绑定行点击事件和获取行数据的方法
2018/08/19 Javascript
wx-charts 微信小程序图表插件的具体使用
2019/08/18 Javascript
javascript设计模式 ? 适配器模式原理与应用实例分析
2020/04/13 Javascript
小程序中的箭头函数的具体使用
2020/06/19 Javascript
[13:18]《一刀刀一天》之DOTA全时刻21:详解TI新赛制 A队再露獠牙
2014/06/24 DOTA
python多线程方式执行多个bat代码
2016/06/07 Python
Python3导入CSV文件的实例(跟Python2有些许的不同)
2018/06/22 Python
深入浅析Python传值与传址
2018/07/10 Python
selenium+python 对输入框的输入处理方法
2018/10/11 Python
python实现微信小程序用户登录、模板推送
2019/08/28 Python
Python+OpenCV实现图像的全景拼接
2020/03/05 Python
关于Python不换行输出和不换行输出end=““不显示的问题(亲测已解决)
2020/10/27 Python
HTML5拖拉上传文件的简单实例
2017/01/11 HTML / CSS
越南综合购物网站:Lazada越南
2019/06/10 全球购物
物流经理自我评价
2013/09/23 职场文书
大学生求职中的自我评价
2013/10/01 职场文书
国贸专业的职业规划书
2014/03/15 职场文书
群众路线查摆问题整改措施思想汇报
2014/10/10 职场文书
银行先进个人总结
2015/02/15 职场文书
小学生光盘行动倡议书
2015/04/28 职场文书
七一晚会主持词
2015/06/29 职场文书
mysql 8.0.24 安装配置方法图文教程
2021/05/12 MySQL
SQL Server数据库的三种创建方法汇总
2023/05/08 MySQL