HTML
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>圖片在線webp/png/jpeg格式轉換工具</title>
6 <meta name="description" content="圖片在線轉換工具：可以選擇.webp .png .jpeg格式圖片轉換器" />
7
8 <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
9 <meta name="format-detection" content="telephone=no" />
10 <meta http-equiv="Cache-Control" content="no-transform,no-siteapp">
11 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
12 <link href="res/style.css" type="text/css" rel="stylesheet"/>
13 </head>
14 <body><div class="center">
15 <h2>圖片在線webp/png/jpeg格式轉換工具</h2>
16 <div class="fli">
17 <span>選擇圖片：</span><input type="file" id="inputimg">
18 <div class="sdiv">
19 <span>選擇格式：</span>
20 <select id="myselect">
21 <option value="1">webp格式</option>
22 <option value="2">jpeg格式</option>
23 <option value="3">png格式</option>
24 </select>
25 </div>
26
27 <button id="start">開始轉換</button>
28 </div>
29 <div class="fli">
30 <p>預覽：</p>
31 <img id="imgShow" src="" alt="">
32 </div>
33 <div class="fli">
34 <h3>備注：</h3>
35 <p>1、轉換后的圖片請選擇右鍵保存！</p>
36 <p>2、該工具目前僅支持轉換為webp、jpeg、png的格式。如果是gif動態圖片轉換后不保留動態效果。</p>
37 <p>3、請使用高版本瀏覽器,推薦使用Chrome。</p>
38 </div>
39 </div></body>
40
41 </html>
CSS
1 * {
2 outline: none;
3 }
4 .center {
5 min-width:1100px;
6 }
7 .center h2 {
8 text-align: center;
9 height: 60px;
10 line-height: 60px;
11 border-bottom: 1px solid #ddd;
12 }
13 .fli {
14 color:#666;
15 font-size: 16px;
16 margin: 10px auto;
17 width: 1100px;
18 }
19 .fli .name {
20 font-size: 16px;
21 margin: 10px auto;
22 color:#1FBCB6;
23 }
24 .fli img {
25 max-width: 400px;
26 }
27 button {
28 border: 0;
29 background: #1FBCB6;
30 color:#fff;
31 padding: 8px 15px;
32 cursor: pointer;
33 }
34 textarea {
35 width: 100%;
36 max-width: 100%;
37 max-height: 500px;
38 }
39 button:hover {
40 background: #1B6D85;
41 }
42 .sdiv {
43 margin: 20px auto;
44 }
45 select {
46 height: 26px;
47 line-height: 26px;
48 border: 1px solid #888;
49 }
JavaScript
1 /*事件*/
2 document.getElementById('start').addEventListener('click', function () { 3 getImg(function (image) { 4 var can = imgToCanvas(image), 5 imgshow = document.getElementById("imgShow"); 6 imgshow.setAttribute('src', canvasToImg(can)); 7 }); 8 }); 9 // 把image 轉換為 canvas對象
10
11 function imgToCanvas(image) { 12 var canvas = document.createElement("canvas"); 13 canvas.width = image.width; 14 canvas.height = image.height; 15 canvas.getContext("2d").drawImage(image, 0, 0); 16 return canvas; 17 } 18 //canvas轉換為image
19
20 function canvasToImg(canvas) { 21 var array = ["image/webp", "image/jpeg", "image/png"], 22 type = document.getElementById('myselect').value - 1; 23 var src = canvas.toDataURL(array[type]); 24 return src; 25 } 26 //獲取圖片信息
27
28 function getImg(fn) { 29 var imgFile = new FileReader(); 30 try { 31 imgFile.onload = function (e) { 32 var image = new Image(); 33 image.src = e.target.result; //base64數據
34 image.onload = function () { 35 fn(image); 36 } 37 } 38 imgFile.readAsDataURL(document.getElementById('inputimg').files[0]); 39 } catch (e) { 40 console.log("請上傳圖片！" + e); 41 } 42 }
實際效果例圖：
