Using canvas to shrink images for Google Cloud Vision

I've started using Google Cloud Vision for running text detection on OpenBenches images. There's just one problem - Google limits the size of the files that it will accept to 4MB.

Why? Who knows!

Obviously, it's easy to shrink an image server-side, but how do we do it in the browser?

First, let's take a bog-standard file chooser and add a <canvas> element.

 HTML<input id="userFile" type="file" accept="image/jpeg" />
<canvas id="shrink"></canvas>

Next, when the user chooses a file, draw it on the canvas at half the resolution of the original file.

 JavaScriptvar input = document.getElementById('userFile');
input.addEventListener('change', drawImage, false);

function drawImage(e) {
   // The File
   var file = e.target.files[0];
   var reader = new FileReader();

   // The Canvas
   var canvas = document.getElementById("shrink");
   var ctx = canvas.getContext('2d');

   // The Image
   var img = new Image();

   // Once the file has been read, set it as the image's source
   reader.readAsDataURL(file);
   reader.onloadend = function () {
      img.src = reader.result;
   }

   // Once the image has been set, draw it on the canvas
   img.onload = function() {
      // Scale the canvas to be half the size of the image
      // You can change the "/2" to be whatever size you want
      ctx.canvas.width  = img.width /2;
      ctx.canvas.height = img.height /2;

      // Draw the image onto the canvas
      ctx.drawImage(img, 0, 0, ctx.canvas.width, ctx.canvas.height);
   }
}

Here's the clever part! We can take the 2D image on the canvas and turn that into a JPG! In this specific example, the quality is set to 75% - which reduces the files size still further. This uses .toDataURL().

 JavaScriptvar smallImage = canvas.toDataURL('image/jpeg', 0.75);

Now smallImage will contain "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDA...."

A much smaller file than the original.

This representation of the file can then be POSTed to Google Cloud Vision.