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="" > 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 }
实际效果例图：
原文地址：https://www.cnblogs.com/cisum/p/9064396.html
时间： 2024-11-07 13:40:21