All geek questions in one place

Can you resize or resize the base64 image using the base64 code?

Base64 has many examples of image encoding. But is there a way to resize or resolution this image by simply manipulating the actual Base64 code?

Your Base64 code could be:

iVBORw0KGgoAAAANSUhEUgAAAWQAAAFjCAIAAACFfObPAAAAA3NCSVQICAjb4U / gAAAgAE ... etc.

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

Thanks for your help in advance :)

UPDATE

I find it a little harsh that they lower me to ask this question. Who lowers me and why?

My question is aimed at people who are looking for progressive images, data manipulation and WebP formats, which are lossless and lossless image compression.

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

So why am I being lowered?

UPDATE 2

I do not show the study because I know that I already looked. Why is this not useful? Why is this unclear? I feel like I'm being lowered because someone else doesn't understand this. It's not my fault.

+8
source share
3 answers

This is possible using the <canvas>

 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>
+11
source

If someone is interested in how to save money and how to keep the aspect ratio:

saves only 60% on 100kb jpg, scaling it to 200 pixels wide

https://www.base64-image.de/

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p>Original</p> <div id="original"></div> <p>Resampled</p> <div id="resampled"></div> <script> var canvas = document.createElement("canvas"); var ctx = canvas.getContext("2d"); var image = new Image(); document.getElementById("original").appendChild(image); image.onload = function (e) { var pixelWidth = 200; var scale = pixelWidth / image.width; canvas.width = scale * image.width; canvas.height = scale * image.height; 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); var a = image.src.length; var b = resampledImage.src.length alert('Savings: ' + Math.floor(100*(ab)/a) + '%'); }; image.src = "data:image/jpeg;base64.... ADD YOUR CODE HERE"; </script> </body> </html>
0
source

Also note that you can also change the image quality with a value from 0 to 1 as the second parameter.

 resampledImage.src = canvas.toDataURL('image/jpeg', 0.1);
0
source

Source: https://habr.com/ru/post/1234324/

More articles:


All Articles