How To Resize Base64 Image in JavaScript?


Here I am giving an example to resize a Base64 image in JavaScript.

Function To Resize Base64 Image in JavaScript

The following JavaScript function resizeBase64image takes 3 arguments:

  1. Base64 data URI
  2. Width
  3. Height

And then it resizes the base64 image to the required size.

function resizeBase64image(datas, wantedWidth, wantedHeight)

        var img = document.createElement('img');

        img.onload = function()
                var canvas = document.createElement('canvas');
                var ctx = canvas.getContext('2d');

                canvas.width = wantedWidth;
                canvas.height = wantedHeight;

                ctx.drawImage(this, 0, 0, wantedWidth, wantedHeight);

                var dataURI = canvas.toDataURL();

        img.src = datas;


resizeBase64image('YourBase64URIImage', 450, 300);

To convert an image to base64 URI online, click here