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

功能需求：

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

实现思路：

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

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

toDataURL 说明：

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

语法：


canvas.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。其他参数会被忽略。

注意点：

如果画布的高度或宽度是 0，那么会返回字符串“data:,”。
其中 webkit 内核浏览器支持“image/webp”类型。建议使用 Chrome 浏览器。

代码例子：

html:


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>图片在线webp/png/jpeg格式转换工具</title>
		<meta name="description" content="图片在线转换工具：可以选择.webp .png .jpeg格式图片转换器" />
    
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="format-detection" content="telephone=no" />
		<meta http-equiv="Cache-Control" content="no-transform,no-siteapp">
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<link href="res/style.css" type="text/css" rel="stylesheet"/>
		<style>
			*{
				outline: none;
			}
			.center{
			  min-width:1100px;
			}
			.center h2{
				text-align: center;height: 60px;line-height: 60px;border-bottom: 1px solid #ddd;
			}
			.fli{
				color:#666;font-size: 16px;margin: 10px auto;width: 1100px;
			}
			.fli .name{
				font-size: 16px;margin: 10px auto;color:#1FBCB6;
			}
			.fli img{
				max-width: 400px;
			}
			button{
				border: 0;background: #1FBCB6;color:#fff;padding: 8px 15px;cursor: pointer;
			}
			textarea{
				width: 100%;max-width: 100%;max-height: 500px;
			}
			button:hover{
				background: #1B6D85;
			}
		
			.sdiv{
				margin: 20px auto;
			   
			}
			select{
				height: 26px;line-height: 26px;border: 1px solid #888;
			}

		</style>
	</head>
	<body><div class="center">
        <div id="ad_line" style="text-align: center;"></div>
		<h2>图片在线webp/png/jpeg格式转换工具</h2>
		<div class="fli">
			<span>选择图片：</span><input type="file" id="inputimg">
			<div class="sdiv">
				<span>选择格式：</span>
				<select id="myselect">
					<option value="1">webp格式</option>
			        <option value="2">jpeg格式</option>
			        <option value="3">png格式</option> 
			    </select>
			</div>
		
			<button id="start">开始转换</button>
		</div>
		<div class="fli">
			<p>预览：</p>
			<img id="imgShow" src="" alt="">
		</div>
		<div class="fli">
			<h3>备注：</h3>
			<p>1、转换后的图片请选择右键保存！</p>
			<p>2、该工具目前仅支持转换为webp、jpeg、png的格式。如果是gif动态图片转换后不保留动态效果。</p>
			<p>3、请使用高版本浏览器,推荐使用Chrome。</p>
		</div>
	</div></body>
	<script>
		/*事件*/
		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);
			}
		}
	</script>
</html>

演示链接 img.format.cool

原文链接

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

功能需求：

实现思路：

toDataURL 说明：

语法：

注意点：

代码例子：

相关帖子

JavaScript 原型和继承

[JS] 添加复选框按钮简单运行一些菜单项, 复制正文文字内容

请问类名相同, 如何根据文本内容获取元素, 谢谢.

JavaScript 数组遍历的方法

AL JS 试题

如何将 ChatGPT 变成 TTS 工具

前端开发

欢迎来到这里！