Welcome folks today in this post we will be building a online image converter in bootstrap 4 and javascript. All the source code will be there in the description. A step by step youtube video is also given below.
Live Demo
Screenshots
Source Code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<!DOCTYPE html> <html> <head> <title>Image Converter in Javascript</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" /> </head> <body> <div class="container"> <br> <h1 class="text-center">Image Converter in Javascript</h1> <br> <form id="myForm" enctype="multipart/form-data"> <div class="form-group"> <label for="fileurl">Image URL:</label> <input type="text" id="url" placeholder="URL" class="form-control"> </div> <div class="form-group"> <label for="image">Select Image:</label> <input type="file" id="image" class="form-control"> <img style="display: none;" id="selectedImage"/> </div> <div class="form-group"> <label for="format">Select Format:</label> <select class="form-control" id="format"> <option>JPEG</option> <option>PNG</option> <option>GIF</option> </select> </div> <div class="form-group"> <button class="btn btn-danger btn-block"> Convert Image </button> </div> </form> </div> </body> <script src="https://cdn.jsdelivr.net/npm/browser-image-converter@0.1.1/dist/index.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="script.js"></script> </html> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
$(document).ready(function () { let imageUrl; $("#image").change(function (e) { var file= e.target.files[0]; readImage(file) }); function readImage(file){ if (file.type && file.type.indexOf('image') === -1) { alert("file is not an image") return; } const reader = new FileReader(); reader.addEventListener('load', (event) => { imageUrl = event.target.result; console.log(imageUrl) }); reader.readAsDataURL(file); } $("#myForm").submit(function (e) { e.preventDefault(); if ($("#url").val() !== "") { imageUrl = $("#url").val(); convertImage(imageUrl); } else { convertImage(imageUrl); } }); function convertImage(imageUrl) { var imageType = $("#format option:selected").text(); if (browserImageCoverter.downloadImageWithType(imageUrl, imageType)) { } } }); |
DOWNLOAD SOURCE CODE
