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. python - 目录处理

    # -*- coding:utf-8 -*- '''@project: jiaxy@author: Jimmy@file: study_文件目录操作.py@ide: PyCharm Community ...

  2. mvc “System.NullReferenceException”类型的异常在 App_Web_zo44wdaq.dll 中发生，但未在用户代码中进行处理 其他信息: 未将对象引用设置到对象的实例。

    “System.NullReferenceException”类型的异常在 App_Web_zo44wdaq.dll 中发生,但未在用户代码中进行处理 其他信息: 未将对象引用设置到对象的实例. 解决 ...

  3. install and config redis on ubuntu14.04

    1.installation: (1)download redis from http://redis.io/download (2)installation: $ tar -xvf redis-3. ...

  4. TOJ1196: RSA Signing

    题不在多,大概是多了也可能就是菜逼 1196: RSA Signing Time Limit(Common/Java):3000MS/30000MS     Memory Limit:65536KBy ...

  5. 计算器（bzoj 2242）

    Description 你被要求设计一个计算器完成以下三项任务: 1.给定y,z,p,计算Y^Z Mod P 的值: 2.给定y,z,p,计算满足xy≡ Z ( mod P )的最小非负整数: 3.给 ...

  6. APUE 学习笔记(七) 信号

    1.信号是软件中断,提供一种异步处理事件的方法 很多事件产生信号: (1)用户按下某些中断键,如 Ctrl + C键产生 SIGINT信号 (2)硬件异常产生信号,比如 除数为0,无效的内存引用  ( ...

  7. 百度图表echars插件使用案例

    <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding= ...

  8. eclipse 的SVN安装

    打开eclipse -> Help ->Install New Software选项, 点击Add按钮   根据需要,添加自己需要的版本svn控制器的版本,填写name和url,点击ok. ...

  9. C语言中的数组的访问方式

    闲下来,写的代码,很是简单,不解释,代码如下: #include <stdio.h> int main(int argc, char **argv) { char cArray[] = & ...

  10. PHP读取APK的包信息，包括包名，应用名，权限，LOGO等

    [转]PHP读取APK的包信息,包括包名,应用名,权限,LOGO等 声明本文转自: 原文链接:https://www.jb51.net/article/53780.htm: 感谢分享! <?ph ...