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?

• javascript
• resize
• pression
• base64
• image-resizing

• 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 1

put 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.