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. Selenium WebDriver-操作键盘事件

    # 注意: !!!操作操作系统的按键,需要先装pywin32,然后通过交互模式import win32api和import win32con判断是否安装成功,需要重启下cmd进入交互模式# 下载链接: ...

  2. custom post types 404 Page Error

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

  3. Coursera无法观看课程解决方案

    Coursera无法观看课程解决方案 最近Cousera一直表现不佳,课程视频无法观看.小编结合网上找到的信息,操作一番便解决了问题,视频也可以正常观看了. 首先是win+s找到记事本,并用管理员身份 ...

  4. Android中当前墙纸Wallpaper存放的位置

    最近想做个应用保存当前墙纸,找了一下,发现当前墙纸的位置在. /System/users/0/wallpaper 没有后缀.导出来修改一下名字就可以看到图标了.比如改为png. 但是,这个目录要求系统 ...

  5. java jstl标签

    转自:http://blog.csdn.net/liushuijinger/article/details/9143793 JSTL(JSP Standard Tag Library ,JSP标准标签 ...

  6. JSON树节点的增删查改

    最近了解到使用json字符串存到数据库的一种存储方式,取出来的json字符串可以进行相应的节点操作 故借此机会练习下递归,完成对json节点操作对应的工具类. 介绍一下我使用的依赖 复制代码 < ...

  7. 【SCOI2003】【BZOJ1092】蜘蛛难题

    有一堆管道,还有一个蜘蛛Willy,如下图所示.所有管道的是上端开口,下端封底,直径都是1cm,连接两个管道的连接容量无限,但体积可以忽略不计. 在第一个管道上方有一个水源,从中有水不断往下流,速度为 ...

  8. TroubleShoot: SharePoint 2013: ExecuteOrDelayUntilScriptLoaded 页面发布后不执行的问题

    SharePoint 2010 中的ExecuteOrDelayUntilScriptLoaded,在2013 中使用时没有效果的问题. Example: SharePoint 2013 Code: ...

  9. 【NOIP2016练习】T1 string （计数）

    题意: 思路: ; ..]of int64; n,k,i:longint; ans,x,y:int64; s,t:ansistring; function c(x,y:longint):int64; ...

  10. IP,子网掩码，网关，DNS的关系解析

    IP地址: 是给每个连接在Internet上的主机分配的一个32bit地址. 地址有两部分组成,一部分为网络地址,另一部分为主机地址. IP地址分为A.B.C.D.E 5类.常用的是B和C两类. 网络 ...