Home > Developer > Web Develop
Html
1<! DOCTYPE html>234<meta charset= "UTF-8" >5<title> Image Online webp/png/jpeg format conversion tool </title>6<meta name= "description" content= "Picture online conversion Tool: You can choose. webp. png. jpeg format Picture Converter"/>7 8<meta name= "viewport" content= "Width=device-width, Initial-scale=1,maximum-scale=1,user-scalable=no" >9<meta name= "format-detection" content= "Telephone=no"/>Ten<meta http-equiv= "Cache-control" content= "No-transform,no-siteapp" > One<meta http-equiv= "x-ua-compatible" content= "Ie=edge"/> A<link href= "Res/style.css" type= "Text/css" rel= "stylesheet"/> - -<body><div class= "center" > the -<div class= "Fli" > -<span> Select Picture: </span><input type= "file" id= "Inputimg" > -<div class= "Sdiv" > +<span> Choose Format:</span> -<select id= "Myselect" > +<option value= "1" >WEBP format </option> A<option value= "2" >jpeg format </option> at<option value= "3" >png format </option> -</select> -</div> - -<button id= "Start" > Start conversion </button> -</div> in<div class= "Fli" > -<p> Preview:</p> to +</div> -<div class= "Fli" > the *<p>1, converted pictures Please choose right-click Save! </p> $<P>2, the tool currently only supports conversion to WEBP, JPEG, PNG format. If it is a GIF animated picture conversion does not preserve the dynamic effect. </p>Panax Notoginseng<p>3, please use the high-version browser, Chrome is recommended. </p> -</div> the</div></body> + A
Css
1 * {2 Outline:None;3}4 . Center{5 Min-width:1100px;6}7 . Center H2{8 text-align:Center;9 Height:60px;Ten Line-height:60px; One Border-bottom:1px solid #ddd; A} - . Fli{ - Color:#666; the font-size:16px; - margin:10px Auto; - width:1100px; -} + . Fli. Name{ - font-size:16px; + margin:10px Auto; A Color:#1FBCB6; at} - . FLI img{ - Max-width:400px; -} - Button{ - Border:0; in background:#1FBCB6; - Color:#fff; to padding:8px 15px; + cursor:Pointer; -} the textarea{ * width:100%; $ Max-width:100%;Panax Notoginseng Max-height:500px; -} the Button:hover{ + background:#1B6D85; A} the . Sdiv{ + margin:20px Auto; -} $ Select{ $ Height:26px; - Line-height:26px; - Border:1px solid #888; the}
Javascript
1 /*Events*/2document.getElementById (' Start '). AddEventListener (' click ',function () {3Getimg (function(image) {4 varcan =Imgtocanvas (image),5Imgshow = document.getElementById ("Imgshow");6Imgshow.setattribute (' src ', Canvastoimg (Can));7 });8 });9 //convert image to canvas objectTen One functionImgtocanvas (image) { A varCanvas = document.createelement ("Canvas"); -Canvas.width =Image.width; -Canvas.height =Image.height; theCanvas.getcontext ("2d"). DrawImage (image, 0, 0); - returnCanvas; - } - //Canvas converted to image + - functioncanvastoimg (canvas) { + varArray = ["Image/webp", "Image/jpeg", "Image/png"], AType = document.getElementById (' Myselect '). value-1; at varsrc =Canvas.todataurl (Array[type]); - returnsrc; - } - //Get picture information - - functiongetimg (FN) { in varImgfile =NewFileReader (); - Try { toImgfile.onload =function(e) { + varImage =NewImage (); -IMAGE.SRC = E.target.result;//Base64 Data theImage.onload =function () { * fn (image); $ }Panax Notoginseng } -Imgfile.readasdataurl (document.getElementById (' inputimg '). files[0]); the}Catch(e) { +Console.log ("Please upload pictures! " +e); A } the}
Example of the actual effect diagram:
Web Image conversion gadget maker
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
