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

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

2021-08-29 17:07fly63 JavaScript

这篇文章主要介绍了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。

语法：

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);

									    }

									}