js+canvas Realization of Image Format webp and png and jpeg Online Conversion

Functional requirements:
We upload a picture in the web page, select different formats, and convert the picture into the corresponding format.

Implementation ideas:
This function can be easily accomplished using the back-end language "php, java, etc." But how can it be done only at the front end?

1. Upload pictures through input and read files into memory using FileReader.

2. Convert the picture to canvas, and set the canvas. toDataURL () method to the format we need, such as "image/webp", "image/jpeg", "image/png".

3. Finally, convert canvas into a picture and display it in the web page. Right-click to save, and you will get pictures in different formats.

toDataURL Description:
Method returns an data URI containing a picture display. You can use the type parameter for its type, which defaults to the PNG format. The resolution of the picture is 96dpi.

Syntax:

canvas.toDataURL(type, encoderOptions);

type "optional" picture format, default to image/png, optional formats: "image/webp", "image/jpeg", "image/png".

encoderOptions "optional" You can select the quality of a picture from 0 to 1 when you specify that the picture format is image/jpeg or image/webp. If the value range is exceeded, the default value of 0.92 will be used. Other parameters are ignored.

Note:

1. If the height or width of the canvas is 0, the string "data:," is returned.

2. The webkit kernel browser supports the "image/webp" type. The Chrome browser is recommended.

Code example:

html:

<input type="file" id="inputimg">
<select id="myselect">
	<option value="1">webp Format </option>
  <option value="2">jpeg Format </option>
  <option value="3">png Format </option> 
</select>
<button id="start"> Start conversion </button>
<p> Preview: </p>
<img id="imgShow" src="" alt="">

js:

/* Events */
document.getElementById('start').addEventListener('click', function(){
	getImg(function(image){
		var can=imgToCanvas(image),
		  imgshow=document.getElementById("imgShow");
		imgshow.setAttribute('src',canvasToImg(can));
	});
});
//  Put image  Convert to  canvas Object  
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 Convert to 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;
}
// Get picture information 
function getImg(fn){
	var imgFile = new FileReader();
	try{
		imgFile.onload = function(e) {
			var image = new Image();
			image.src= e.target.result; //base64 Data  
			image.onload=function(){
				fn(image);
			}
		}
		imgFile.readAsDataURL(document.getElementById('inputimg').files[0]);
	}catch(e){
		console.log(" Please upload pictures! "+e);
	}
}

Online Demo:

Address: https://www.ofstack.com/tools/webp.html

Need to use in chrome browser, we can play by ourselves can do a batch conversion.