website logo

Last Updated:

Convert Images Using Canvas and Javascript

HTML Canvas is a versatile tool for web developers. You can use canvas to draw beautiful graphics for your website.

Canvas can also be used for other purpose, like animating a scene or converting images from one format to another.

You can find the complete source code in the bottom of this blog.

Add a canvas and a file Input

In your HTML document, add a canvas element.

<canvas id="canvas"></canvas>

Add a file input element to let user upload their images for conversion.

<input type="file" accept="image/*" />

In the above input element, I am adding a accept="image/*" attribute. Because of this attribute, the user can only see images in the file picker.

Get height and width of the image

  1. Get the DOM reference of the canvas and input element in the Javascript file.
const canvas = document.getElementById("canvas");

const fileInput = document.querySelector("input[type='file']");
  1. Listen for the file change event and get the user uploaded image.
fileInput.onchange = (e) => {
  const file = e.target.files[0];
};
  1. Create a new Image object from user uploaded image.
fileInput.onchange = (e) => {
  const file = e.target.files[0];
  const img = new Image();
  const url = URL.createObjectURL(file);
  img.src = url;
};
  1. Calculate width and height of the image.
fileInput.onchange = (e) => {
  const file = e.target.files[0];
  const img = new Image();
  const url = URL.createObjectURL(file);
  img.src = url;
  img.onload = () => {
    let width = img.width;
    let height = img.height;
  };
};
  1. Resize the canvas to the image width and height.
img.onload = () => {
  let width = img.width;
  let height = img.height;
  canvas.width = width;
  canvas.height = height;
};

Convert image using Canvas

  1. Get canvas 2d context
let ctx = canvas.getContext("2d");
  1. Draw the image on the canvas.
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
  1. Export the image as Data URL. You can define image type and Encoder option. Encoder option determine your image quality and ranges between 0 to 1.
let dataurl = canvas.toDataURL("image/png"); // default
let dataurl = canvas.toDataURL("image/jpeg", 0.5);
let dataurl = canvas.toDataURL("image/webp", 1);

Encoder option only works on file formats which support lossy compression (e.g. jpeg, webp)

Download Image

  1. Create an a element.
let anchor = document.createElement("a");
  1. Set anchor href to the Data URL generated from the canvas.
anchor.href = dataurl;
  1. Give a name to the image file.
anchor.download = "image.png";
  1. Invoke click() method on anchor element to download the converted image.
anchor.click();

Source Code

<canvas id="canvas"></canvas>
<input type="file" accept="image/*" />
<script src="./index.js"></script>

const canvas = document.getElementById("canvas");
const fileInput = document.querySelector("input[type='file']");

fileInput.onchange = (e) => {
  const file = e.target.files[0];
  const img = new Image();
  const url = URL.createObjectURL(file);
  img.src = url;
  img.onload = () => {
    let width = img.width;
    let height = img.height;
    canvas.width = width;
    canvas.height = height;
    let ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
    let dataurl = canvas.toDataURL("image/jpeg");
    exportImage(dataurl, file.name, "jpeg");
  };
};

function exportImage(dataurl, name, extension) {
  let anchor = document.createElement("a");
  anchor.href = dataurl;
  anchor.download = name + "." + extension;
  anchor.click();
}

Conclusion

You have just learn how to get an image from the user, draw on the canvas, convert it to other format and download the converted image. Hope you find this guide helpful.

See Also