How to reduce the size of a base64 String for a Jpeg Image? I have the base64 of a 2000x1000px photo. How to get the 500x250px base64 pressed photo? Someone can help me?
How to reduce the size of a base64 String for a Jpeg Image? I have the base64 of a 2000x1000px photo. How to get the 500x250px base64 pressed photo? Someone can help me?
Share Improve this question asked May 9, 2012 at 9:47 KeyserSKeyserS 212 silver badges3 bronze badges 1-
use it's data url to load it as an image, render it (resized) to a canvas element, store the result from
toDataURL. – Yoshi Commented May 9, 2012 at 9:53
1 Answer
Reset to default 6put the base64 in an image tag
var img = document.createElement("img");
img.src = "data:image/gif;base64," + yourBase64;
draw it to a scaled canvas
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.scale(0.25, 0.25);
ctx.drawImage(img);
get the base64
var base64 = canvas.toDataURL("image/jpeg");
I didn't actually test this so the resizing part might be wrong, but it would be something like this.
try searching how to resize images using the canvas tag.