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 相关文章推荐
瀑布流布局并自动加载实现代码
Mar 12 Javascript
js中的scroll和offset 使用比较的实例与分析
Sep 29 Javascript
js实现的常用的左侧导航效果
Oct 17 Javascript
javascript中bind函数的作用实例介绍
Sep 28 Javascript
jQuery解析json格式数据简单实例
Jan 22 Javascript
Bootstrap每天必学之导航组件
Apr 25 Javascript
jQuery获取访问者IP地址的方法(基于新浪API与QQ查询接口)
May 25 Javascript
浅谈jQuery中事情的动态绑定
Feb 12 Javascript
老生常谈JavaScript面向对象基础与this指向问题
Oct 16 Javascript
JavaScript面向对象程序设计中对象的定义和继承详解
Jul 29 Javascript
Chrome插件开发系列一:弹窗终结者开发实战
Oct 02 Javascript
vue 中的动态传参和query传参操作
Nov 09 Javascript
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
亚洲咖啡有什么?亚洲咖啡产地介绍 亚洲咖啡有什么特点?
2021/03/05 新手入门
typecho插件编写教程(三):保存配置
2015/05/28 PHP
初窥JQuery-Jquery简介 入门了解篇
2010/11/25 Javascript
基于jQuery的投票系统显示结果插件
2011/08/12 Javascript
基于JQuery的$.ajax方法进行异步请求导致页面闪烁的解决办法
2016/05/10 Javascript
node.js cookie-parser 中间件介绍
2016/06/06 Javascript
jQuery dataTables与jQuery UI 对话框dialog的使用教程
2016/09/02 Javascript
理解 javascript 中的函数表达式与函数声明
2017/07/07 Javascript
JS实现简易计算器
2020/02/14 Javascript
jquery实现图片放大镜效果
2020/12/23 jQuery
[03:09]2014DOTA2国际邀请赛 赛场上的美丽风景线 中国Coser也爱DOTA2
2014/07/20 DOTA
[44:41]Fnatic vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python socket.error: [Errno 98] Address already in use的原因和解决方法
2014/08/25 Python
python中argparse模块用法实例详解
2015/06/03 Python
Python中的集合类型知识讲解
2015/08/19 Python
python使用wmi模块获取windows下的系统信息 监控系统
2015/10/27 Python
python 实现数字字符串左侧补零的方法
2018/12/04 Python
python七夕浪漫表白源码
2019/04/05 Python
python3人脸识别的两种方法
2019/04/25 Python
解决Keras 与 Tensorflow 版本之间的兼容性问题
2020/02/07 Python
Django实现从数据库中获取到的数据转换为dict
2020/03/27 Python
使用Python制作一盏 3D 花灯喜迎元宵佳节
2021/02/26 Python
美国电子产品主要品牌的授权在线零售商:DataVision
2019/03/23 全球购物
LUISAVIAROMA德国官网:时尚奢侈品牌购物网站
2020/11/12 全球购物
python+selenium小米商城红米K40手机自动抢购的示例代码
2021/03/24 Python
优秀小学生家长评语
2014/01/30 职场文书
函授本科自我鉴定
2014/02/04 职场文书
欢迎领导检查标语
2014/06/27 职场文书
2014年学前班工作总结
2014/12/08 职场文书
硕士论文致谢范文
2015/05/14 职场文书
2016年助残日旅游活动总结
2016/04/01 职场文书
详解Redis主从复制实践
2021/05/19 Redis
Python爬虫之用Xpath获取关键标签实现自动评论盖楼抽奖(二)
2021/06/07 Python
MySQL query_cache_type 参数与使用详解
2021/07/01 MySQL
MySQL8.0的WITH查询详情
2021/08/30 MySQL
《帝国时代4》赛季预告 新增内容编译器可创造地图
2022/04/03 其他游戏