使用FabricJS创建背景画布 [英] Creating a backing canvas with FabricJS

问题描述

我需要一个小工作区，但是我的FabricJS画布的大输出，因为我把它转换为PNG进行打印生产。

I need a small workspace, but a large output for my FabricJS canvas, as I am converting this to a PNG for print production. I tried the CSS trick where you have a large canvas, but then it appears small.

例如：

 .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>

但是，当我尝试这个时，它是非常慢， t响应CSS。一旦输出到页面，代码如下：

However, when I try this, it is extremely slow and there are parts of the canvas that don't respond to the CSS. Once it is outputted to the page, the code looks like:

<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生成的所有这些元素的任何想法或更好，

Any ideas of how to get the CSS to apply across all these elements generated by FabricJS or better yet, would it be better to create a backing canvas/how would I do that?

推荐答案

我知道你的问题是要求别的东西，但我面临着同样的问题，我发现没有办法可靠地有很大的png现在。

I know your question is asking for something else, but i'm facing the same problem and i found out there is no way to reliably have very larg pngs right now. Canvas is not meant for that.

想象你想以300dpi的分辨率打印A2纸。
你得到一个5200 x 7000（或多或少）画布。

Imagine you want to print an A2 sheet at 300dpi resolution. You get a 5200 x 7000 ( more or less ) canvas. This is still doable with normal canvas without any trick, but it will be probably slow.

如果你想要进行A0和更高的dpi打印，并且得到18.000 x 24.000像素的画布，你会有崩溃，一般不会工作。

If you want to go UP to A0 and higher dpi printing and get canvases of 18.000 x 24.000 pixels you will have crashes and generally it won't work.

24.000 x 18.000 x 4byte是一个1.7G字节的内存只是为了像素。
我想你会在这个画布上有一些图片在更高的res，这将是其他对象在内存中。

24.000 x 18.000 x 4byte is a 1.7Gbyte of memory just for the pixels. I imagine you will have some pictures on this canvas at higher res, and this will be other objects in memory.

考虑大多数用户安装32位版本的浏览器，或者考虑使用nodejs，其中的进程会产生很多ram。

Consider that most users install a 32bit version of the browser, or consider using nodejs where the process will spawn a lot of ram.

你会遇到问题。

我实际上面临着类似的问题，我决定去与svg。
我使用一个普通的画布（全屏幕），然后我要求导出我想要的维度。

I'm actually facing a similar problem and I decided to go with svg. I work with a normal canvas ( full screen ) and then I ask for an export of the dimensions I desire.

如果你拾起一个fabricjs版本最近，可能是最新的，您会得到一个用于导出SVG的新选项：

If you pick up a fabricjs version built lately, possibly latest, you get a new option for exporting SVG:

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

至少，您将拥有一个具有正确尺寸的SVG。
然后找到一些将处理它的栅格库，或者找到一些接受SV的打印服务。或尝试使用pdf打印机打印到pdf。

At least, you will have an SVG with the right dimensions. Then find some raster library that will handle that or find some print service that accept SVs. Or try to print to pdf with a pdf printer.

此外，请考虑将png导出为canvas为96dpi。
这意味着你必须以某种方式处理它们以便以更高的分辨率打印。

Also, consider that png export by canvas is fixed at 96dpi. This means that you have to handle them in some way to be printed in higher res.

一个9600像素的大画布会导致100英寸的打印，除非打印首页并选择适合打印机边距。

a 9600 pixel large canvas will result in a 100inches print unless you print home and select "fit to printer margins".

这篇关于使用FabricJS创建背景画布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！