Canvas toDataUrl 图像结果（png base64）大小比预期大！两倍大

Question

我已经运行了 FabricJS，用户可以在产品上添加文本/图像，对其进行操作，然后购买产品。我的计划是当用户完成设计时，我会将画布导出为 png base64，并以 JSON 格式将其发送到服务器（它会有点大，但我可以承受这个打击，我必须这样做，以保持打印质量)。

我正在使用的画布尺寸是 - 宽度：1600 & 高度：2400

我预计 base64 图像的原始大小是 PNG 对应图像的 137%，但我得到的是原始大小的 280%。

我做的测试是：

• 向画布添加任何内容
• 导出并控制台记录 base64 图像
• 在线使用多个工具将base64解码为png，然后编码回base64，这是我的结果：

测试 1 - 添加全尺寸图片并导出：

1. 画布导出的初始 base64 图像大小：12.6mb

2. 转换为 PNG 后：4851 kb

3. 将相同的 PNG 编码回 base64 后：6576 kb（这是我在初始导出时期望的大小）

4. 再次将生成的半尺寸 base64 解码回 PNG 后：4851 kb（与大型 base64 完全相同）

测试 2 - 使用简单的文本元素完成，结果比率几乎相同。

我用于编码/解码的主要在线工具有：

• https://onlinepngtools.com/convert-base64-to-png
• https://www.base64encode.org/

我用来导出画布的方法（它内置于 vueJS，无关信息但仅用于上下文）：

    exportCanvas() {
      const exportedArt = this.canvas.toDataURL({
        format: "png"
      });
      this.exportedArt = exportedArt;
      const exportedArtThumbnail = this.canvas.toDataURL({
        format: "png",
        multiplier: 0.2
      });
      console.log("Exported Art:", exportedArt);
      console.log("Exported Thumbnail:", exportedArtThumbnail);
    }

我尝试检查 pixelRatio 的东西，我的设备的像素比为 1，所以这不是问题。我也知道整个“retinaScaling”在这里不是问题。

我错过了什么？

Answer 1

我刚刚意识到我原来的 base64 导出的整个混乱是由于 chrome 控制台错误地读取了 base64 大小。

我在控制台外手动检查了我的原始 base64 导出大小，一切都正确检查。我得到了预期的 6576 kb。因此，console.log 对字符串的大小估计让我很失望。

这里没有问题，只是从 chrome 控制台读取的字符串大小不正确。