JSFiddle - React, Tailwind, and code Playground

by Pavlo

JavaScript

var oldBase64 = "iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAK8AAACvABQqw0mAAAABZ0RVh0Q3JlYXRpb24gVGltZQAwOC8xOC8wOaw6EPwAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzQGstOgAAABGklEQVRYhe2VsUoEMRCGvxUrsRE82FbQxtYHOMHiSGcv1oOVPsJhY6uVpLbyCaZ1La66QvAthEWxEhZcC/estphNPKbZv5xM/vmSGZKibVs8tZFrICIvIrLlBgA8AvcisukCEGO8AQ6BAxeATq/AngtAd/UT4M0FADgDtmOMy5TNSYMDfye/5vfqL1J9kgGAfeAEmMYYv1JNclowA55ziucCfALfOcVzARbAkYjs5gAU1r8ghDAHjoHpKlaW5UNd1+dN06xCFfCkqvN/BQgh3AKXPUs7wHtP/E5VrywA1hb0FUdVP4bk5wCsTe4A5iFcl0wvYQhhMKWqFpY89xaMACPACDACWAGqgb7mfCvA6QDTqss3yf0zcp+BH8xOSf7FbdnSAAAAAElFTkSuQmCC";

$("body").append("Old image: <img src=data:image/gif;base64,"+oldBase64+"></img>");

resizeBase64Img(oldBase64, 100, 100).then(function(newImg){
    $("body").append("<br/>Resized image:").append(newImg);
});

function resizeBase64Img(base64, width, height) {
    var canvas = document.createElement("canvas");
    canvas.width = width;
    canvas.height = height;
    var context = canvas.getContext("2d");
    var deferred = $.Deferred();
    $("<img/>").attr("src", "data:image/gif;base64," + base64).load(function() {
        context.scale(width/this.width,  height/this.height);
        context.drawImage(this, 0, 0); 
        deferred.resolve($("<img/>").attr("src", canvas.toDataURL()));               
     });
     return deferred.promise();    
}