Question

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

我正在使用的画布大小是-宽度：1600和高度：2400

我希望base64图像能达到其PNG图像原始大小的137％，但是我得到的却是原始大小的280％。

我所做的测试是：

在画布上添加任何内容
导出和console.log base64映像
在线使用了多种工具将base64解码为png，然后再编码回base64，这是我的结果：

测试1-添加完整尺寸的图像并将其导出：

画布导出时的初始base64图像大小：12.6mb
转换为PNG后：4851 kb
在将相同的PNG编码回base64之后：6576 kb（这是我最初希望导出的大小）
将生成的halfsize base64再次解码回PNG后：4851 kb（与大base64完全相同的结果）

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

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

我用于导出画布的方法（其内置于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控制台读取字符串大小不正确。

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

1 个答案: