HTML5 Canvas Image Upload And Download

September 8, 2020

• html5. canvas
• image
• upload
• download

Many websites and apps rely on user uploaded images, and also downloading images too. This post is going to show you how to create a simple image upload/download, using the HTML5 Canvas.

First, we need some HTML. A canvas element to display the image, a file upload input to get the users image, and a button to trigger the download:

    <canvas id="canvas"></canvas>
    <label for="uploader">Select file:</label>
    <input type="file" id="uploader" />
    <button>Download</button>

      // 1.
      const canvas = document.getElementById("canvas");
      const ctx = canvas.getContext("2d");
      
      // 2.
      const reader = new FileReader();
      const img = new Image();
      
      // 3.
      const uploadImage = (e) => {
        reader.onload = () => {
          img.onload = () => {
            canvas.width = img.width;
            canvas.height = img.height;
            ctx.drawImage(img, 0, 0);
          };
          img.src = reader.result;
        };
        reader.readAsDataURL(e.target.files[0]);
      };
    
      // 4.
      const imageLoader = document.getElementById("uploader");
      imageLoader.addEventListener("change", uploadImage);

      // 5.
      function download() {
        const image = canvas.toDataURL();
        const link = document.createElement("a");
        link.href = image;
        link.download = "image.png";
        link.click();
      }
      
      //6.
      document.querySelector("button").addEventListener("click", download);

We then need the above Javascript to both upload the image, and also download too.

1/ First we get the canvas element we want to draw the image to, we then need to access what is called the rendering context, this allows us to access a range of drawing functions so we can manipulate what is on the canvas.

Here we declare we are using the 2d functions. This ctx variable is used each time we want to draw to the canvas.

2/ This file reader allows us to read the contents of files, or in our case images, stored on a users computer. This will allow us to use the file uploader input we added in the HTML, select an image, then set this as the image source. The Image constructor creates a new image element (same as when we create elements with document.createElement())

3/ This function will wait for the reader and image element to be available, set the width and height and the image src.

This file data is stored in the event, or this 'e' variable passed from the file we uploaded. We can access this image file we need from e.target.files.

Now all of this file data we see logged here needs to be read by something which can understand it all. And fortunately, the fileReader has a method we can use called readAsDataURL. This is used to read the contents of our uploaded file or image.

4/ Get a reference to the file uploader element, and run our above function when a change (image upload) has happened.

5/ To download our image, we call the toDataURL method. This will get the image from the canvas, and return in the default image/png format. This can be changed by adding a string parameter such as 'image.jpeg'.

We then create an 'a' element, add the image as the href to download, and then simulate a mouse click using the Javascript click() method. This effectively gives us the result of clicking on a download link, without the need to prompt the user to do so.

6/ Call our download function on a users click.

You can find a CodePen with the code used in this post here:

https://codepen.io/chrisdixon161/pen/GRZOVYR

Please be aware the demo may not work with some larger images on CodePen.