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

 

 

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

 

 

TUTORIAL VIDEO

 

THE 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

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

 

 

 

INFOGRAPHIC CHEATSHEET

 

COMPATIBILITY CHECKS

• Arrow Functions – CanIUse
• File Reader – CanIUse
• Canvas – CanIUse

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

 

LINKS & REFERENCES

• Download HTML Canvas As Image – Code Boxx
• How To Read Files In Javascript – Code Boxx