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.

Allerus

no, and why you would to do that? writing an image parser (e.g. gif-in-b64) would take more work than simply doing img = base64_encode(mangle_image(base64_decode(orig_image)); b64 is wrapping paper around a present. you don't fiddle with the wrapping paper in the hopes of changing the unwanted barbie doll into a hotwheels car. – Microbe

Because I don't want to have multiple images of different sizes and resolutions. I also don't want to have the network access latency of loading an image from disk and manipulating it, storing the original and then manipulating that based on my requirements. On a side note your analogy doesn't really help and saying it's wrapping paper around a present is also completely inaccurate. I'm also assuming your example of the image is from your own collection, so tells me more about you than the answer.. A simple no would have been more appreciated. Thanks though – Allerus

I believe that any resize operation on an image requires an in-memory representation of that image. So the base-64 data won't work, but even an encoded GIF or JPEG must be converted into some raw image format, operated upon, re-converted to GIF/JPEG, then re-base-64 encoded. – Efflorescence

Having a variable with a Base64 string would be considered an 'in-memory' representation. You can change the colour of an image if you have that image in a 'pixel array', so I wondered if there was a Base64 approach. Unless you make the changes using a Pixel array and then convert that to Base64? – Allerus

@Allerus this might help you developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/… – Ouch

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>

Ouch

Thanks for the reply. I appreciate you can do it using Canvas or other UI elements, but I want to try doing the conversion/manipulation in code only, and not create any HTML(5) elements. – Allerus

Don't think that is possible. – Ouch

could you increase the resolution? – Lorrainelorrayne

Yes but obviously you'd get some type of cubic downsampling – Ouch

This works very well, but better to adjust the picture quality to make it much ligther. That is possible by adjust the function toDataURL() as follow ctx.canvas.toDataURL('image/jpeg', 0.7) – Coppinger

Answer 2

Well this is very old but you can manipulate it using it as background with an url and background-size:contain; That way the image should show inside the height and with you establish and not be clipped by the container.

Rowdyism