爱萝莉真是太好了 爱萝莉真是太好了

努力让自己变得更优秀呀!

目录
原生js使用canvas实现图片格式webp/png/jpeg在线转换
/  

原生js使用canvas实现图片格式webp/png/jpeg在线转换

功能需求:

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

实现思路:

实现这样的功能,使用后端语言【php,java 等】可以很容易的完成。但是如果只在前端如何完成呢?

  1. 通过 input 上传图片,使用 FileReader 将文件读取到内存中。
  2. 将图片转换为 canvas,canvas.toDataURL()方法设置为我们需要的格式,如:"image/webp","image/jpeg","image/png"。
  3. 最后将 canvas 转换为图片,显示在网页中。点击右键保存,就得到了不同格式的图片了。

toDataURL 说明:

方法返回一个包含图片展示的 data URI 。可以使用 type 参数其类型,默认为 PNG 格式。图片的分辨率为 96dpi。

语法:

1canvas.toDataURL(type, encoderOptions);.toDataURL(type, encoderOptions);(type, encoderOptions);type, encoderOptions);, encoderOptions);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:

  1<!DOCTYPE html>
  2<html>
  3	<head>
  4		<meta charset="UTF-8">
  5		<title>图片在线webp/png/jpeg格式转换工具</title>
  6		<meta name="description" content="图片在线转换工具:可以选择.webp .png .jpeg格式图片转换器" />
  7    
  8		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
  9		<meta name="format-detection" content="telephone=no" />
 10		<meta http-equiv="Cache-Control" content="no-transform,no-siteapp">
 11		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
 12		<link href="res/style.css" type="text/css" rel="stylesheet"/>
 13		<style>
 14			*{
 15				outline: none;
 16			}
 17			.center{
 18			  min-width:1100px;
 19			}
 20			.center h2{
 21				text-align: center;height: 60px;line-height: 60px;border-bottom: 1px solid #ddd;
 22			}
 23			.fli{
 24				color:#666;font-size: 16px;margin: 10px auto;width: 1100px;
 25			}
 26			.fli .name{
 27				font-size: 16px;margin: 10px auto;color:#1FBCB6;
 28			}
 29			.fli img{
 30				max-width: 400px;
 31			}
 32			button{
 33				border: 0;background: #1FBCB6;color:#fff;padding: 8px 15px;cursor: pointer;
 34			}
 35			textarea{
 36				width: 100%;max-width: 100%;max-height: 500px;
 37			}
 38			button:hover{
 39				background: #1B6D85;
 40			}
 41		
 42			.sdiv{
 43				margin: 20px auto;
 44			   
 45			}
 46			select{
 47				height: 26px;line-height: 26px;border: 1px solid #888;
 48			}
 49
 50		</style>
 51	</head>
 52	<body><div class="center">
 53        <div id="ad_line" style="text-align: center;"></div>
 54		<h2>图片在线webp/png/jpeg格式转换工具</h2>
 55		<div class="fli">
 56			<span>选择图片:</span><input type="file" id="inputimg">
 57			<div class="sdiv">
 58				<span>选择格式:</span>
 59				<select id="myselect">
 60					<option value="1">webp格式</option>
 61			        <option value="2">jpeg格式</option>
 62			        <option value="3">png格式</option> 
 63			    </select>
 64			</div>
 65		
 66			<button id="start">开始转换</button>
 67		</div>
 68		<div class="fli">
 69			<p>预览:</p>
 70			<img id="imgShow" src="" alt="">
 71		</div>
 72		<div class="fli">
 73			<h3>备注:</h3>
 74			<p>1、转换后的图片请选择右键保存!</p>
 75			<p>2、该工具目前仅支持转换为webp、jpeg、png的格式。如果是gif动态图片转换后不保留动态效果。</p>
 76			<p>3、请使用高版本浏览器,推荐使用Chrome。</p>
 77		</div>
 78	</div></body>
 79	<script>
 80		/*事件*/
 81		document.getElementById('start').addEventListener('click', function(){
 82			getImg(function(image){
 83				var can=imgToCanvas(image),
 84					imgshow=document.getElementById("imgShow");
 85				imgshow.setAttribute('src',canvasToImg(can));
 86			});
 87		});
 88		// 把image 转换为 canvas对象  
 89		function imgToCanvas(image) { 
 90		    var canvas = document.createElement("canvas");  
 91		    canvas.width = image.width;  
 92		    canvas.height = image.height;  
 93		    canvas.getContext("2d").drawImage(image, 0, 0);  
 94		    return canvas;  
 95		}  
 96		//canvas转换为image
 97		function canvasToImg(canvas) {
 98			var array=["image/webp","image/jpeg","image/png"],
 99				type=document.getElementById('myselect').value-1;
100		    var src = canvas.toDataURL(array[type]);
101		    return src;
102		}
103		//获取图片信息
104		function getImg(fn){
105			var imgFile = new FileReader();
106			try{
107				imgFile.onload = function(e) {
108					var image = new Image();
109					image.src= e.target.result; //base64数据 
110					image.onload=function(){
111						fn(image);
112					}
113				}
114				imgFile.readAsDataURL(document.getElementById('inputimg').files[0]);
115			}catch(e){
116				console.log("请上传图片!"+e);
117			}
118		}
119	</script>
120</html>

演示链接 img.format.cool

原文链接


标题:原生js使用canvas实现图片格式webp/png/jpeg在线转换
地址:https://www.1-love.cn/js-imgformat.html