压缩/调整jpeg大小并使用Javascript获取Base64

Question

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?

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.