使用 Javascript 减少 base64 图像内存大小答案

【问题标题】：Reducing base64 image memory size using Javascript使用 Javascript 减少 base64 图像内存大小
【发布时间】：2013-03-07 08:55:40
【问题描述】：

我正在使用 canvas.toDataURL() 并以 base64 格式获取图像。但是在将它上传到服务器之前，我可以将图像的内存大小减少到 10KB 吗？如何使用 JavaScript 或 jquery 做到这一点？我使用的代码是：

var context = canvas.getContext("2d");
context.drawImage(imageObj, c.x, c.y, c.w, c.h, 0, 0, canvas.width, canvas.height);
var vData = canvas.toDataURL();

【问题讨论】：

你能告诉我们你到目前为止所做的尝试吗
@harsha：编辑了我的问题。

标签： javascript jquery image base64

【解决方案1】：

如果您想压缩字符串，您可以尝试here 中提到的一种压缩算法，但 DataURL 已经被相当压缩了，所以这应该没什么区别。

另一种选择是使用 toDataURL 的第二个参数指定 JPG 的质量，通常可以安全地降低该质量，而不会对图像质量产生明显影响。

如果请求的类型是image/jpeg或image/webp，那么第二个参数，如果它在0.0和1.0之间，则被视为表示图像质量；如果第二个参数是其他参数，则使用图像质量的默认值。其他参数被忽略。

【讨论】：

是的，我已经阅读了有关图像“质量”因素的信息，这是否会将图像的大小减少到 10KB？
@Ashwini：质量和图像大小之间没有 1:1 的关系。它是指数级的（结果质量也是如此）。
@Aaron Digulla：如果我降低质量因子，图像看起来不会那么好，对吧？否则，还有其他方法可以减小 base64 图像的大小吗？
不描述原图，参考10KB是没有意义的。就质量因素而言，通过降低它来了解影响有多大的最好也是唯一的方法。对于某些类型的图形，我将其降低到 30% 左右，但仍然很好，而对于其他图形，我倾向于以 90% 左右的速度导出。
@Ashwini: 你可以做的是检查getDataUrl() 的结果的长度并降低质量直到它小于10KB。使用二分搜索，应该足够快/准确。