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转换为image19 ?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 }实际效果例图：
web图片转换小工具制作
原文地址：https://www.cnblogs.com/cisum/p/9064396.html