HTML

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>图片在线webp/png/jpeg格式转换工具</title>

         <meta name="description" content="图片在线转换工具：可以选择.webp .png .jpeg格式图片转换器" />

         <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">

         <meta name="format-detection" content="telephone=no" />

         <meta http-equiv="Cache-Control" content="no-transform,no-siteapp">

         <meta http-equiv="X-UA-Compatible" content="IE=edge" />

         <link href="res/style.css" type="text/css" rel="stylesheet"/>

     </head>

     <body><div class="center">

         <h2>图片在线webp/png/jpeg格式转换工具</h2>

         <div class="fli">

             <span>选择图片：</span><input type="file" id="inputimg">

             <div class="sdiv">

                 <span>选择格式：</span>

                 <select id="myselect">

                     <option value="1">webp格式</option>

                     <option value="2">jpeg格式</option>

                     <option value="3">png格式</option>

                 </select>

             </div>

             <button id="start">开始转换</button>

         </div>

         <div class="fli">

             <p>预览：</p>

             <img id="imgShow" src="" alt="">

         </div>

         <div class="fli">

             <h3>备注：</h3>

             <p>1、转换后的图片请选择右键保存！</p>

             <p>2、该工具目前仅支持转换为webp、jpeg、png的格式。如果是gif动态图片转换后不保留动态效果。</p>

             <p>3、请使用高版本浏览器,推荐使用Chrome。</p>

         </div>

     </div></body>

 </html>

CSS

 * {

     outline: none;

 }

 .center {

     min-width:1100px;

 }

 .center h2 {

     text-align: center;

     height: 60px;

     line-height: 60px;

     border-bottom: 1px solid #ddd;

 }

 .fli {

     color:#666;

     font-size: 16px;

     margin: 10px auto;

     width: 1100px;

 }

 .fli .name {

     font-size: 16px;

     margin: 10px auto;

     color:#1FBCB6;

 }

 .fli img {

     max-width: 400px;

 }

 button {

     border:;

     background: #1FBCB6;

     color:#fff;

     padding: 8px 15px;

     cursor: pointer;

 }

 textarea {

     width: 100%;

     max-width: 100%;

     max-height: 500px;

 }

 button:hover {

     background: #1B6D85;

 }

 .sdiv {

     margin: 20px auto;

 }

 select {

     height: 26px;

     line-height: 26px;

     border: 1px solid #888;

 }

JavaScript

 /*事件*/

 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);

     }

 }

实际效果例图：

web图片转换小工具制作的更多相关文章

  1. Char Tools，方便的字符编码转换小工具

    工作关系,常有字符编码转换方面的需要,写了这个小工具 Char Tools是一款方便的字符编码转换小工具,基于.Net Framework 2.0 Winform开发 主要功能 URL编码:URLEn ...

  2. 流媒体协议（RTMP、RTSP、UDP、HTTP、MMS）转换小工具（RTSP转成RTMP案例展示）（转）

    源: 流媒体协议(RTMP.RTSP.UDP.HTTP.MMS)转换小工具(RTSP转成RTMP案例展示)

  3. httpscan 爬虫式的网段Web主机发现小工具

    httpscan是一个扫描指定网段的Web主机的小工具.和端口扫描器不一样,httpscan是以爬虫的方式进行Web主机发现,因此相对来说不容易被防火墙拦截.httpscan会返回IP http状态码 ...

  4. MarkDown本地图片上传工具制作总结

    引言:开始尝试使用MarkDown语法写文档,发现图片必须用外链的形式才能插入到文章中,而自己平时最常用的插入图片方式就是QQ截屏,觉得很不方便所以制作的小工具辅助上传,因为时间和水平有限,其实代码写 ...

  5. Python写的大小写转换小工具

    几行代码的小工具,用于进行如下转换 TRANSACTIONS ON CLOUD COMPUTING => Transactions On Cloud Computing orig = 'TRAN ...

  6. OpenCV与MFC实战之图像处理 样本采集小工具制作 c++MFC课程设计

    原文作者:aircraft 原文链接:https://www.cnblogs.com/DOMLX/p/12111102.html 入门不久的人可以通过opencv实战来锻炼一下学习opencv的成果, ...

  7. 一个web图片热点生成工具（winform开发） 附源码

    给图片加热点是web开发中经常用到的一个功能.这方面的工具也不少. 为了更好的满足自己的需求,写了一个winform程序. 可以方便的给图片加热点,更方便灵活! 源码下载 http://downloa ...

  8. testlink用例转换小工具（excel转为xml，python版）

    前面文章记录了testlink的安装方法(CentOS 7下安装xampp和testlink),由于testlink仅支持xml格式的用例导入,研究了下excel转xml的方法, 从网上其他网友那里借 ...

  9. 翻译小工具制作，Python简单破解有道JS加密！

    写这篇文章之前,我记得我以前好像公布一次.百度翻译的接口把版本号修改可以得到老版本,而老版本是没JS加密的,有道的呢也是一样的. ! 不过今天的教程不会这么low,咱们今天就老老实实把有道翻译的JS破 ...

随机推荐

  1. socketcluster 客户端请求

    <html> <head> <title>test</title> <script src="https://cdn.bootcss.c ...

  2. custom post types 404 Page Error

    问题: 注册新的文章类型后,用新的类型写文章,打开后报 404 错误 原因: 因为虽然注册了新的帖子类型,但WordPress还不知道如何处理它 解决: 到设置 -> 固定链接,重新点击保存,再 ...

  3. 第1章jquery选择器

    一.jquery等价于$ jquery选择器继承了css选择器的风格. $("#ID")代替了document.getElementById()函数,即通过id获取元素. $(&q ...

  4. ASP.NET MVC下使用SWFUpload完成剪切头像功能

    首先介绍SWFUpload组件 SWFUpload是一个客户端文件上传工具,最初由Vinterwebb.se开发,它通过整合Flash与JavaScript技术 为WEB开发者提供了一个具有丰富功能继 ...

  5. [python学习篇][系统学习][1]python标准库中文、英文网址（一些内建函数，标准库都可以在这里查找）

    http://docspy3zh.readthedocs.io/en/latest/library/   半中文网址 http://usyiyi.cn/translate/python_278/lib ...

  6. [python IO学习篇] 补充.py文件是中文, .ini文件内容是中文

    python 代码文件的编码.py文件默认是ASCII编码,中文在显示时会做一个ASCII到系统默认编码的转换,这时就会出错:SyntaxError: Non-ASCII character.需要在代 ...

  7. [Uiautomator篇][2] UiDeviceAPI介绍

    1 https://developer.android.com/training/testing/ui-testing/uiautomator-testing.html  http://www.cnb ...

  8. [错误解决]Ubuntu中使用dpkg安装deb文件提示依赖关系问题，仍未被配置

    使用dpkg进行软件安装时,提示:dpkg:处理软件包XXX时出错:依赖关系问题,仍未被配置 使用如下命令,sudo apt-get install -f 等分析完之后,重新使用dpkg –i XXX ...

  9. ThinkPHP5杂技（一）

    Thinkphp5 assign 传递 " 时 ,前台收到的是 " 和ThinkPHP3.2不一样,3.2收到的是 ”,传递给js时 用的data.replace(new RegE ...

  10. git如何忽略文件或者文件夹

    用git开发中会有一些不愿意提交的目录或者文件 在仓库目录下新建一个名为.gitignore的文件(因为是点开头,没有文件名,没办法直接在windows目录下直接创建,必须通过右键Git Bash,按 ...