js+canvas实现图片格式webp/png/jpeg在线转换

2023-07-18 09:33:05 83

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

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

1、通过input上传图片，使用FileReader将文件读取到内存中。

2、将图片转换为canvas，canvas.toDataURL()方法设置为我们需要的格式，如："image/webp","image/jpeg","image/png"。

3、最后将canvas转换为图片，显示在网页中。点击右键保存，就得到了不同格式的图片了。

toDataURL说明：
方法返回一个包含图片展示的dataURI。可以使用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:



	webp格式
jpeg格式
png格式

开始转换
预览：

js:

/*事件*/
document.getElementById('start').addEventListener('click',function(){
	getImg(function(image){
		varcan=imgToCanvas(image),
		imgshow=document.getElementById("imgShow");
		imgshow.setAttribute('src',canvasToImg(can));
	});
});
//把image转换为canvas对象
functionimgToCanvas(image){	
varcanvas=document.createElement("canvas");
canvas.width=image.width;
canvas.height=image.height;
canvas.getContext("2d").drawImage(image,0,0);
returncanvas;
}
//canvas转换为image
functioncanvasToImg(canvas){
	vararray=["image/webp","image/jpeg","image/png"],
	type=document.getElementById('myselect').value-1;
varsrc=canvas.toDataURL(array[type]);
returnsrc;
}
//获取图片信息
functiongetImg(fn){
	varimgFile=newFileReader();
	try{
		imgFile.onload=function(e){
			varimage=newImage();
			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://www.nhooo.com/tools/webp.html

说明：需要在chrome浏览器中使用，大家可以自行发挥可以做个批量转换。

到此这篇关于js+canvas实现图片格式webp/png/jpeg在线转换的文章就介绍到这了,更多相关webp/png/jpeg在线转换内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

js+canvas实现图片格式webp/png/jpeg在线转换

热门推荐

随机推荐