使用 FabricJS 创建背景画布

Question

我需要一个小的工作区，但我的 FabricJS 画布需要一个大的输出，因为我正在将其转换为 PNG 用于印刷生产。我尝试了 CSS 技巧，你有一个大画布，但它看起来很小。

例子：

 .canvas-container canvas {
    width: 650px !important;
    height: 436px !important;
    border: 1px solid blue;
}

 <div class="col-md-8 hidden-xs hidden-sm canvas-container">
                <canvas id="c"></canvas>
</div>

但是，当我尝试这个时，它非常慢，并且画布的某些部分不响应 CSS。输出到页面后，代码如下：

<div class="col-md-8 hidden-xs hidden-sm canvas-container" style="z-index:2" ng-hide="showBoxPreviewContainer">
<div class="canvas-container" style="width: 25800px; height: 16743.7px; position: relative; -webkit-user-select: none;">
<canvas id="c" class="lower-canvas" width="25799" height="16743" style="position: absolute; width: 25800px; height: 16743.7px; left: 0px; top: 0px; -webkit-user-select: none;">
</canvas>
<canvas class="upper-canvas " width="25799" height="16743" style="position: absolute; width: 25800px; height: 16743.7px; left: 0px; top: 0px; -webkit-user-select: none; cursor: default;">
</canvas>
</div>

关于如何让 CSS 应用于 FabricJS 生成的所有这些元素或更好的任何想法，创建一个支持画布会更好/我该怎么做？

Answer 1

我知道你的问题是要求别的东西，但我面临同样的问题，我发现现在没有办法可靠地拥有非常大的 png。 Canvas 不是为此而设计的。

假设您想以 300dpi 的分辨率打印一张 A2 纸。 你得到一个 5200 x 7000（或多或少）的画布。 这对于普通的画布仍然是可行的，没有任何技巧，但它可能会很慢。

如果您想达到 A0 和更高的 dpi 打印并获得 18.000 x 24.000 像素的画布，您将遇到崩溃并且通常无法正常工作。

24.000 x 18.000 x 4byte 是仅用于像素的 1.7Gbyte 内存。 我想你会在这个画布上放一些高分辨率的图片，这将是内存中的其他对象。

考虑到大多数用户安装的是 32 位版本的浏览器，或者考虑使用 nodejs，因为该进程会产生大量内存。

你会遇到问题。

我实际上面临着类似的问题，我决定使用 svg。 我使用普通画布（全屏），然后要求导出我想要的尺寸。

如果您选择最近构建的 fabricjs 版本，可能是最新版本，您将获得一个导出 SVG 的新选项：

canvas.toSVG({width: '1120mm', height: '841mm'});

至少，您将拥有一个尺寸合适的 SVG。 然后找到一些可以处理该问题的光栅库或找到一些接受 SV 的打印服务。或者尝试用pdf打印机打印成pdf。

另外，请考虑通过画布导出的 png 固定为 96dpi。 这意味着您必须以某种方式处理它们才能以更高的分辨率打印。

除非您打印首页并选择“适合打印机边距”，否则 9600 像素的大画布将打印 100 英寸。