How To Resize Base64 Image in JavaScript?

Table Of Contents

1. Function To Resize Base64 Image in JavaScript
2. Usage

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;
    }

Usage

resizeBase64image('YourBase64URIImage', 450, 300);

To convert an image to base64 URI online, click here https://image2base64.xyz