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的创建多行字符串的7种方法
Apr 29 Javascript
控制文字内容的显示与隐藏示例
Jun 11 Javascript
JavaScript实现数字数组正序排列的方法
Apr 06 Javascript
JavaScript监听文本框回车事件并过滤文本框空格的方法
Apr 16 Javascript
javascript数组去重方法汇总
Apr 23 Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
Oct 28 Javascript
bootstrapvalidator之API学习教程
Jun 29 Javascript
Vue核心概念Getter的使用方法
Jan 18 Javascript
vue中各种通信传值方式总结
Feb 14 Javascript
基于layui实现高级搜索(筛选)功能
Jul 26 Javascript
详解基于element的区间选择组件校验(交易金额)
Jan 07 Javascript
Vue3中的Refs和Ref详情
Nov 11 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
php设计模式 FlyWeight (享元模式)
2011/06/26 PHP
PHP自动识别字符集并完成转码详解
2013/08/02 PHP
php结合curl实现多线程抓取
2015/07/09 PHP
PHP函数func_num_args用法实例分析
2015/12/07 PHP
Laravel框架实现model层的增删改查(CURD)操作示例
2018/05/12 PHP
PHP实现创建一个RPC服务操作示例
2020/02/23 PHP
关于jquery的多个选择器的使用示例
2013/10/18 Javascript
解决checkbox的attr(checked)一直为undefined问题
2014/06/16 Javascript
浅谈javascript中的instanceof和typeof
2015/02/27 Javascript
微信内置浏览器私有接口WeixinJSBridge介绍
2015/05/25 Javascript
微信小程序项目实践之九宫格实现及item跳转功能
2018/07/19 Javascript
详解如何使用nvm管理Node.js多版本
2019/05/06 Javascript
详解Vscode中使用Eslint终极配置大全
2019/11/08 Javascript
json解析大全 双引号、键值对不在一起的情况
2019/12/06 Javascript
javascript实现点击星星小游戏
2019/12/24 Javascript
javascript实现移动端轮播图
2020/12/09 Javascript
Python升级提示Tkinter模块找不到的解决方法
2014/08/22 Python
python实现折半查找和归并排序算法
2017/04/14 Python
Pandas GroupBy对象 索引与迭代方法
2018/11/16 Python
python正则表达式匹配不包含某几个字符的字符串方法
2019/07/23 Python
浅谈TensorFlow中读取图像数据的三种方式
2020/06/30 Python
django数据模型中null和blank的区别说明
2020/09/02 Python
浅谈Selenium 控制浏览器的常用方法
2020/12/04 Python
HTML5实现视频直播功能思路详解
2017/11/16 HTML / CSS
HTML5 FormData 方法介绍以及实现文件上传示例
2017/09/12 HTML / CSS
Vrbo西班牙:预订您的度假公寓(公寓、乡村房屋…)
2020/04/27 全球购物
八年级历史教学反思
2014/01/10 职场文书
公积金单位接收函
2014/01/11 职场文书
《故乡》教学反思
2014/04/10 职场文书
文明寝室申报材料
2014/05/12 职场文书
三问三解心得体会
2014/09/05 职场文书
2014年政协工作总结
2014/12/09 职场文书
工厂采购员岗位职责
2015/04/07 职场文书
初中生物教学随笔
2015/08/15 职场文书
python tkinter模块的简单使用
2021/04/07 Python
Python+OpenCV实现图片中的圆形检测
2022/04/07 Python