Resizing Base64 Images with JavaScript: A Snap to Scale

When working with images, it’s often necessary to resize them to reduce their file size or to fit a specific aspect ratio. And let’s be real, nobody wants to get stuck with a pixelated image that’s just not quite the right size.

We’ve got you all covered! In this post, we’ll explore a JavaScript function that can resize a base64 encoded image. This function is a real lifesaver and will have your images looking picture perfect in no time.

The function, called resizeBase64Image, takes in a single parameter: the base64 encoded image. It returns a promise that resolves with the resized image in the form of a data URL. This function is a real “snap” to use and will make resizing images a breeze.

The function first sets a maximum image size limit of 4MB in bytes and then converts it. Additionally, the maximum image size limit will be used as the limit for the final image size.

const maxSizeInMB = 4;
const maxSizeInBytes = maxSizeInMB * 1024 * 1024;

Next, the function creates an HTML Image object and sets its src property to the base64 image. It then adds an onload event listener to the image, which will be called when the image has finished loading.

const img = new Image();
img.src = base64Image;
img.onload = function () {
   // Resizing logic goes here
};

Inside the onload event listener, the function creates an HTML canvas element and gets its 2D rendering context. It then stores the original width and height of the image, as well as its aspect ratio.

const canvas = document.createElement("canvas"); 
const ctx = canvas.getContext('2d'); 
const width = img.width; 
const height = img.height; 
const aspectRatio = width / height;

To determine the new width and height of the image, the function uses the aspect ratio to calculate the size that would allow the image to fit within the maximum size in bytes. And let me tell you, it’s a real “ratio-nale” approach.

const newWidth = Math.sqrt(maxSizeInBytes * aspectRatio);
const newHeight = Math.sqrt(maxSizeInBytes / aspectRatio);

The function then sets the width and height of the canvas to the new values, and draws the original image on the canvas, scaled to the new size. And just like that, your image is ready for its close-up!

canvas.width = newWidth;
canvas.height = newHeight;
ctx.drawImage(img, 0, 0, newWidth, newHeight);

Finally, the function encodes the resized image as a JPEG, with a default quality of 80%. It then returns the image in the form of a data URL. And that’s a “snap-shot” of the final result!

let quality = 0.8; 
let dataURL = canvas.toDataURL('image/jpeg', quality); 
resolve(dataURL);

And that’s it! With this function, you can easily resize base64.

Here’s the full function:

resizeBase64Image: function (base64Image) {
  return new Promise((resolve, reject) => {
    const maxSizeInMB = 4;
    const maxSizeInBytes = maxSizeInMB * 1024 * 1024;
    const img = new Image();
    img.src = base64Image;
    img.onload = function () {
      const canvas = document.createElement("canvas");
      const ctx = canvas.getContext('2d');
      const width = img.width;
      const height = img.height;
      const aspectRatio = width / height;
      const newWidth = Math.sqrt(maxSizeInBytes * aspectRatio);
      const newHeight = Math.sqrt(maxSizeInBytes / aspectRatio);
      canvas.width = newWidth;
      canvas.height = newHeight;
      ctx.drawImage(img, 0, 0, newWidth, newHeight);
      let quality = 0.8;
      let dataURL = canvas.toDataURL('image/jpeg', quality);
      resolve(dataURL);
    };
  });
}

In conclusion, resizing images can be a hassle, but with the JavaScript function ‘resizeBase64Image’, it’s a breeze. This function takes in a single parameter, the base64 encoded image, and returns a promise that resolves with the resized image in the form of a data URL. The function also sets a maximum image size limit of 4MB in bytes, which ensures that the final image is of high quality and easy to work with.

Give it a try and see how it can improve your image handling process. Happy coding!