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. [error:没有解析库]Couldn't find a tree builder with the features you requested: xml. Do you need to install a parser library?

    将代码拷贝到服务器上运行,发生错误提示需要新安装parser library. 查看代码中发现有以下内容: soup = BeautifulSoup(open(fp), 'xml') 安装解析库即可: ...

  2. iOS学习笔记25-录音和网络流媒体

    .录音 AVFoundation框架还有一个AVAudioRecorder类专门处理录音操作,它同样支持多种音频格式. 先来了解下AVAudioRecorder的常用属性: @property (re ...

  3. python调用C/C++动态链接库和jython

    总结(非原创) Python调用C库比较简单,不经过任何封装打包成so,再使用python的ctypes调用即可. 1. C语言文件:pycall.c #include <stdio.h> ...

  4. 【bzoj4004】[JLOI2015]装备购买 贪心+高斯消元求线性基

    题目描述 脸哥最近在玩一款神奇的游戏,这个游戏里有 n 件装备,每件装备有 m 个属性,用向量zi(aj ,.....,am) 表示 (1 <= i <= n; 1 <= j < ...

  5. kb-07线段树--10--dfs序建树

    /* hdu3974 dfs序建树,然后区间修改查询: */ #include<iostream> #include<cstdio> #include<cstring&g ...

  6. JSON树节点的增删查改

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

  7. NOIP2017赛前模拟(5):总结

    题目: 1.刮刮卡 已知n(n<=1000000)张刮刮卡按顺序排列,刮开可以获得B元现金和B个积分,购买刮刮卡需要A元,某人若按照顺序刮开的话··当B的总和小于A时便会停止刮卡(即花出去的钱多 ...

  8. Java面试题之多线程同步和互斥有几种实现方法，都是什么？

    线程同步是指线程之间所具有的一种制约关系,一个线程的执行依赖另外一个线程的消息,当它没有得到另一个线程的消息时应等待,直到消息到达时才被唤醒. 线程互斥是指对于共享的进程系统资源,每个线程访问时的排他 ...

  9. scrapy之download middleware

    官方文档:https://docs.scrapy.org/en/latest/topics/downloader-middleware.html 一 write your own downloader ...

  10. 关于cookie使用的一些问题

    保存cookie后提取出来发现字符串是被编码过的,需要decodeURIComponent进行下解码才可以 设置cookie setCookie(c_name, value, expiredays) ...