日韩欧美手机在线,精品一区二区电影,欧美日韩免费看

功能需求：
我們在網頁中上傳一張圖片，選擇不同的格式，將該圖片轉換為對應的格式。

實現思路：
實現這樣的功能，使用后端語言【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);

									    }

									}