压缩/调整 jpeg 大小并在 Javascript 中获取 Base64

【问题标题】：Compress/Resize jpeg and get the Base64 in Javascript压缩/调整 jpeg 大小并在 Javascript 中获取 Base64
【发布时间】：2012-05-09 09:47:28
【问题描述】：

如何减小 Jpeg 图像的 base64 字符串的大小？我有一张 2000x1000px 照片的 base64。如何获得 500x250px base64 压缩照片？有人可以帮助我吗？

【问题讨论】：

使用它的数据 url 将其加载为图像，将其渲染（调整大小）到画布元素，存储来自 toDataURL 的结果。

标签： javascript resize compression base64 image-resizing

【解决方案1】：

将base64放入图片标签

var img = document.createElement("img");
img.src = "data:image/gif;base64," + yourBase64;

将其绘制到缩放的画布上

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);

得到base64

var base64 = canvas.toDataURL("image/jpeg");

我实际上并没有对此进行测试，因此调整大小的部分可能是错误的，但它会是这样的。

尝试搜索如何使用画布标签调整图像大小。

【讨论】：