CODEWITHSUNDEEP
javascriptresizecompressionbase64image-resizing
KeyserS
KeyserS

Reputation: 21

Compress/Resize jpeg and get the Base64 in Javascript

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 compressed photo? Someone can help me?

Upvotes: 2

Views: 9895

Answers (1)

arahaya
arahaya

Reputation: 1020

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.

Upvotes: 6

Related Questions