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. ogre3D学习基础11 -- 日志文件的使用与异常处理

    用文件来记录 Ogre 系统初始化.运行.结束以及调试信息.使用日志便于我们调试程序.Ogre 日志系统由两个类组成:Log 类与 LogManager. 1.Log类 Log 类的一个对象对应于一个 ...

  2. 聊聊、Nginx GDB与MAIN参数

    接着上一篇,我们学习 Nginx 的 main 方法.用 gdb 工具调试 Nginx,首先 gdb nginx.如下: gdb 调试工具有很多的命令,上一篇为了找 main 方法用了 b 命令,也就 ...

  3. POJ 2181 Jumping Cows

    Jumping Cows Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 6398   Accepted: 3828 Desc ...

  4. 【转】C# 中的"yield"使用

    C# 中的"yield"使用 yield是C#为了简化遍历操作实现的语法糖,我们知道如果要要某个类型支持遍历就必须要实现系统接口IEnumerable,这个接口后续实现比较繁琐要写 ...

  5. Leetcode 115 Distinct Subsequences 解题报告

    Distinct Subsequences Total Accepted: 38466 Total Submissions: 143567My Submissions Question Solutio ...

  6. iOS学习笔记45-Swift(五)协议

    一.Swift协议 协议是为方法.属性等定义一套规范,没有具体的实现,类似于Java中的抽象接口,它只是描述了方法或属性的骨架,而不是实现.方法和属性实现还需要通过定义类,函数和枚举完成. 1. 协议 ...

  7. [POJ1155]TELE

    [POJ1155]TELE 试题描述 A TV-network plans to broadcast an important football match. Their network of tra ...

  8. P2134 百日旅行 (斜率优化,DP)

    题目链接 Solution 斜率优化\(DP\). 今天下午才打的第一道题 QwQ... \(90\) 分很简单,一个简单的递推. 令 \(f[i]\) 为最后一天旅游的花费, \(g[i]\) 为最 ...

  9. mod性质 学习笔记

    mod性质小结 \(a\equiv b(\mod m)\) $ \rightarrow \( \)a-b=k*m,k\in Z$ \(a\equiv b且c\equiv d(\mod m)\) \(\ ...

  10. bzoj 2794 [Poi2012]Cloakroom 离线+背包

    题目大意 有n件物品,每件物品有三个属性a[i], b[i], c[i] (a[i]<b[i]). 再给出q个询问,每个询问由非负整数m, k, s组成,问是否能够选出某些物品使得: 对于每个选 ...