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 相关文章推荐
JavaScript初学者应注意的七个细节小结
Jan 30 Javascript
Yii-自定义删除确认弹框(zyd)jquery实现代码
Mar 04 Javascript
Js 代码中,ajax请求地址后加随机数防止浏览器缓存的原因
May 07 Javascript
jquery中trigger()无法触发hover事件的解决方法
May 07 Javascript
在localStorage中存储对象数组并读取的方法
Sep 24 Javascript
基于Vuejs和Element的注册插件的编写方法
Jul 03 Javascript
Vue2.0中集成UEditor富文本编辑器的方法
Mar 03 Javascript
Vue中computed与methods的区别详解
Mar 24 Javascript
jQuery属性选择器用法实例分析
Jun 28 jQuery
Quasar Input:type=&quot;number&quot; 去掉上下小箭头 实现加减按钮样式功能
Apr 09 Javascript
在VUE style中使用data中的变量的方法
Jun 19 Javascript
ReactRouter的实现方法
Jan 25 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
Php部分常见问题总结
2006/10/09 PHP
php循环创建目录示例分享(php创建多级目录)
2014/03/04 PHP
php生成随机颜色的方法
2014/11/13 PHP
php中 $$str 中 &quot;$$&quot; 的详解
2015/07/06 PHP
使用PHP生成二维码的方法汇总
2015/07/22 PHP
Thinkphp5 如何隐藏入口文件index.php(URL重写)
2019/10/16 PHP
JS中批量给元素绑定事件过程中的相关问题使用闭包解决
2013/04/15 Javascript
Json序列化和反序列化方法解析
2013/12/19 Javascript
JS 数字转换研究总结
2013/12/26 Javascript
js实现完全自定义可带多级目录的网页鼠标右键菜单方法
2015/02/28 Javascript
使用js实现的简单拖拽效果
2015/03/18 Javascript
javascript实现不同颜色Tab标签切换效果
2016/04/27 Javascript
JQuery点击事件回到页面顶部效果的实现代码
2016/05/24 Javascript
vue开发心得和技巧分享
2016/10/27 Javascript
BootStrapValidator校验方式
2016/12/19 Javascript
vue指令以及dom操作详解
2017/03/04 Javascript
关于页面刷新vuex数据消失问题解决方案
2017/07/03 Javascript
layer插件select选中默认值的方法
2018/08/14 Javascript
javascript闭包的使用之按钮切换功能
2018/08/30 Javascript
node中的cookie的具体使用
2018/09/13 Javascript
vue生命周期的探索
2019/04/03 Javascript
jquery+css实现Tab栏切换的代码实例
2019/05/14 jQuery
解决Can't find variable: SockJS vue项目的问题
2020/09/22 Javascript
[02:34]肉山说——泡妞篇
2014/09/16 DOTA
python中偏函数partial用法实例分析
2015/07/08 Python
Python读取Excel的方法实例分析
2015/07/11 Python
Python中模块string.py详解
2017/03/12 Python
详解Python核心对象类型字符串
2018/02/11 Python
pandas series序列转化为星期几的实例
2018/04/11 Python
Python同步遍历多个列表的示例
2019/02/19 Python
python Django编写接口并用Jmeter测试的方法
2019/07/31 Python
专注澳大利亚特产和新西兰特产的澳洲中文网:0061澳洲制造
2019/03/24 全球购物
秸秆管理实施方案
2014/03/15 职场文书
大学生翘课检讨书范文
2014/10/06 职场文书
绿里奇迹观后感
2015/06/15 职场文书
认识实习感想
2015/08/10 职场文书