Creating a backing canvas with FabricJS

问题

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.

Example:

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

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>

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?

回答1:

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.

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.

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

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

You will have problems.

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.

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'});

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.

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.

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

来源：https://stackoverflow.com/questions/34234722/creating-a-backing-canvas-with-fabricjs

标签

css

html5

canvas

fabricjs