Convert Image File Format In Javascript (JPG, PNG, WEBP, GIF)

Welcome to a quick tutorial and example on converting the image file format in Javascript – JPG, PNG, WEBP, and GIF. Yes, you have also read correctly. We can convert an image directly in the web browser without uploading it to the server. Read on for the example!

 

 

TABLE OF CONTENTS

 

DOWNLOAD & DEMO

Here is the download link to the example code, so you don’t have to copy-paste everything.

 

EXAMPLE CODE DOWNLOAD

Click here to download | Example on CodePen

The example code is released under the MIT license, so feel free to build on top of it or use it in your own project.

 

SORRY FOR THE ADS...

But someone has to pay the bills, and sponsors are paying for it. I insist on not turning Code Boxx into a "paid scripts" business, and I don't "block people with Adblock". Every little bit of support helps.

Buy Me A Coffee Code Boxx eBooks

 

 

CONVERT IMAGE DEMO





 

JAVASCRIPT CONVERT IMAGE FORMAT

All right, let us now get into more details about how the HTML Javascript image converter works.

 

TUTORIAL VIDEO

 

THE HTML

convert.html
<form id="cForm" onsubmit="return convert.read()">
  <label>SELECT FORMAT</label>
  <select id="cFormat">
    <option value="webp">WEBP</option>
    <option value="jpeg">JPG</option>
    <option value="png">PNG</option>
    <option value="gif">GIF</option>
  </select>
 
  <label>CHOOSE FILE</label>
  <input type="file" id="cFile" accept="image/*" required>
 
  <input type="submit" value="Go">
</form>

Well, I don’t think this needs much explanation. Just a simple form with 2 fields –

  • <select id="cFormat"> Image format selector.
  • <input type="file" id="cFile"> File picker.

 

 

THE JAVASCRIPT

convert.js
var convert = {
  // (A) PROPERTIES
  reader : null, // file reader
  img : null, // selected image
 
  // (B) READ SELECTED IMAGE
  read : () => {
    convert.reader = new FileReader();
    convert.reader.onload = convert.obj;
    convert.reader.readAsDataURL(
      document.getElementById("cFile").files[0]
    );
    return false;
  },
 
  // (C) SELECTED IMAGE TO OBJECT
  obj : () => {
   convert.img = new Image();
    convert.img.onload = convert.go;
    convert.img.src = convert.reader.result;
  },
 
  // (D) CONVERT & DOWNLOAD
  go : () => {
    // (D1) CREATE EMPTY CANVAS
    let canvas = document.createElement("canvas"),
        ctx = canvas.getContext("2d");
 
    // (D2) DRAW IMAGE ONTO CANVAS
    canvas.width = convert.img.width;
    canvas.height = convert.img.height;
    ctx.drawImage(convert.img, 0, 0);
 
    // (D3) GET SELECTED IMAGE FORMAT
    let format = document.getElementById("cFormat").value,
        ext = format=="jpeg" ? "jpg" : format ;
 
    // (D4) CONVERT & "FORCE DOWNLOAD"
    let a = document.createElement("a");
    a.href = canvas.toDataURL(`image/${format}`);
    a.download = `converted.${ext}`;
    a.click();
    a.remove();
  }
};

This looks like a handful, but keep calm and look carefully. It’s just long-winded.

  • (B) First, we read the selected image from the file picker.
  • (C) Then, convert the selected file into an image object.
  • (D1) To do the conversion, we need the help of yet another canvas object…
  • (D2) Draw the image object onto the canvas.
  • (D3 & D4) To convert and force a download.
    • We create an anchor link.
    • Attach the canvas data to the anchor link, in the required image format. E.g. data:image/png;base64,WHATEVER-RAW-IMAGE-DATA
    • Click on the anchor link to download the converted image.

TLDR – File picker > File Reader > Image Object > Canvas > Anchor Tag

 

 

EXTRAS

That’s all for the tutorial, and here is a small section on some extras and links that may be useful to you.

 

INFOGRAPHIC CHEATSHEET

Javascript Convert Image File Format (Click To Enlarge)

 

COMPATIBILITY CHECKS

This example works on all modern “Grade A” browsers.

 

LINKS & REFERENCES

 

THE END

Thank you for reading, and we have come to the end. I hope that it has helped you to better understand, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment

Your email address will not be published. Required fields are marked *