How to resize or change resolution of base64 image through manipulating the base64 code?

Question

There are lots of examples of encoding images to Base64. Is there a way of changing the size or resolution of that image by simply manipulating the actual base64 encoded content?

Your base64 code might be:

iVBORw0KGgoAAAANSUhEUgAAAWQAAAFjCAIAAACFfObPAAAAA3NCSVQICAjb4U/gAAAgAE...

Is there an algorithm or equation that allows you to manipulate that Base64 string to change the size of the image or change the resolution?

---

My question is aimed at people looking at progressive images, data manipulation, and WebP formats, which is a lossless and lossy compression of images.

I am not interested in creating Canvas elements and manipulating the contents of the canvas. I am interested in an approach that can be used either on the client or server and can be sent via HTTP or socket communication.

Answer 1

It is possible by using the <canvas> element

var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");

canvas.width = 32; // target width
canvas.height = 32; // target height

var image = new Image();
document.getElementById("original").appendChild(image);

image.onload = function(e) {
    ctx.drawImage(image, 
        0, 0, image.width, image.height, 
        0, 0, canvas.width, canvas.height
    );
    // create a new base64 encoding
    var resampledImage = new Image();
    resampledImage.src = canvas.toDataURL();
    document.getElementById("resampled").appendChild(resampledImage);
};

image.src = "data:image/png; base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAABaFBMVEVMoUNNoURNokROokVPokZQo0dRpEhSpElTpUpUpUtVpk1Wpk1Xp09ZqFBZqFFaqFJbqVJbqVNdqlVeqlVeq1Zgq1hgrFhirFpirVtlrl5mr15nr2BpsGFqsWNssmRus2dvs2hwtGlxtGlytWtztWx4uHF5uXJ6uXR+u3d/vHiAvHqBvXqCvXyDvn2Evn6HwIGMw4aPxImRxYuUx46Vx5CWyJGbypacy5egzZuizp2kz5+kz6Cm0KGn0aKp0qSp0qWs1Kiu1Kmw1ayy1q602LC12LG627e83Lm+3bvF4cPI4sXJ48bK48jL5MjM5MrN5cvP5szQ5s7R58/S59DU6dLV6dPa7Nnf7t7g79/h79/i8OHj8OLk8ePm8uXn8ubp9Ojq9Onr9ers9evt9ezu9u3v9+7w9+/x+PDy+PHy+PL0+fP0+fT1+vX2+vX3+/f4+/j5/Pj5/Pn6/Pr7/fv9/v3+/v7+//7////VxbUKAAABVElEQVR4Ae3L65cKcQDH4e9YYe2utMnFsuu+rCyFKDVyKSTG/X6RVO5Ums+/r3HQOZz5zcyb7U3P+0drbcLKVRVF/DacVQSbnkL/oCJY+Axv4orgpAvOlMJYvJXU0GWgqBBSDd4ekhR7CINjClYGellJ21rwfocCWYUBcDUmHfkBj2IKlv4EPEhI54GKQlh4DjQOyKoBp2Syf1qemZtAN6PZV/Btr/xNdz5cnNeQVXKBK+uXvsNd+TsH9K4taujEF+D+1iw35uTP7gK4zlFL2vMCeL1vWUaJC208jzMbNFsHzijIxtPP8LzLz62z3UsKwTp+D8/Xyq7DUzKZ36nflq73AXpbZFSi49irKXm2lz9CVWZ3+KVVL6aT0ubcy90ye8JIs1ZYiStIYqVQa/JXXr4A/ZFMF+stPMsSYAojqVXbac+EDiPmwD/GH/431mAwhmA28RMGFbXqgVfHnwAAAABJRU5ErkJggg==";

<p>Original (48x48)</p>
<div id="original"></div>
<p>Resampled (32x32)</p>
<div id="resampled"></div>