Replies: 3 comments 10 replies
-
|
@asturur Hopefully you can give me some hints :) |
Beta Was this translation helpful? Give feedback.
-
|
Wouldn't hurt to have an index.js file with the code you use to write down the file. |
Beta Was this translation helpful? Give feedback.
-
|
I've used toJSON() function of FabricJS to write down the file.... not sure why this would be helpful? The goal is to generate PNG files from FabricJS JSON through node (server-side). This way we can alter some text in the JSON and have Fabric generate the canvas when calling loadFromJSON() on a StaticCanvas and finally export to data-url. As I said earlier, while it works with SVG (and is fast enough, <700ms) it doesn't fit our need because of text rendering issues. Does that make sense? Again, the main concern is that it takes 2 to 3 times the amount of time it takes for Konva to achieve the same thing. I know both libraries use node-canvas so maybe there is a specific issue in Fabric? |
Beta Was this translation helpful? Give feedback.
-
|
My request was because is way easier to pickup a runnable file rather than having to build one to help you debugging the use case having a direct comparision between konva and fabricJS in the same run could make things easier. One issue could be that creating the canvas or adding things from JSON will for sure get you extra renders here and there, even if you are not asking for them. Are you using a multiplier when exporting? |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for following up @asturur. You can find the code here for Fabric: https://gist.github.com/mfauveau/3c8ec7b8e0e23d82cedbceb8533fb39a To clarify, I don't add things to the JSON, just modify a string of text. I'm curious if exporting from the actual Canvas would make things faster. Maybe creating another Canvas creates the delay. Is that possible with the StaticCanvas or do I have to build something custom? |
Beta Was this translation helpful? Give feedback.
-
|
the only change worth trying is to swap this line https://gist.github.com/mfauveau/3c8ec7b8e0e23d82cedbceb8533fb39a#file-cli-js-L40 with something like: considering that to the native toDataURL you have to pass Doing what you are doing now ( that is the correct way to use fabricJS since toDataUrl has many options that make everything simpler if you start the export on a new element ) a new canvas with the same size gets created, it gets repainted and then exported. |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for the suggestion. Sadly didn't really do anything to the rendering
time. Really not sure what's going on.
…On Tue, Jun 1, 2021 at 2:34 PM Andrea Bogazzi ***@***.***> wrote:
the only change worth trying is to swap this line
https://gist.github.com/mfauveau/3c8ec7b8e0e23d82cedbceb8533fb39a#file-cli-js-L40
with something like:
process.stdout.write(canvas.lowerCanvasEl.toDataURL(args.f))
considering that to the native toDataURL you have to pass image/png and
not png only.
This is the only meaning full difference i can think of.
Doing what you are doing now ( that is the correct way to use fabricJS
since toDataUrl has many options that make everything simpler if you start
the export on a new element ) a new canvas with the same size gets created,
it gets repainted and then exported.
So basically you are doing everything twice exactly. This could justify a
multiplication of 2x on the timing, but not a 3x.
—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
<#7081 (reply in thread)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AAAH4U5HTE7RCKBDU764LNLTQUR2RANCNFSM45TAJUPA>
.
|
Beta Was this translation helpful? Give feedback.
-
|
well it should, or there is a huge timesink elsewhere. |
Beta Was this translation helpful? Give feedback.
-
|
my test: const fabric = require("fabric").fabric
const fs = require('fs')
const {
performance,
} = require('perf_hooks');
const data = '{"version":"4.5.0","objects":[{"type":"image","version":"4.5.0","originX":"left","originY":"top","left":112.13,"top":75,"width":101,"height":200,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":0.75,"scaleY":0.75,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"cropX":0,"cropY":0,"src":"https://pisces.bbystatic.com/image2/BestBuy_US/images/products/5801/5801400_bd.jpg;maxHeight=200;maxWidth=200","crossOrigin":null,"filters":[],"isDeletable":false},{"type":"textbox","version":"4.5.0","originX":"center","originY":"center","left":150,"top":270,"width":300,"height":20.34,"fill":"#000000","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"text":"Apple - iPhone XR 64 GB - White","fontSize":18,"fontWeight":"normal","fontFamily":"Lato","fontStyle":"normal","lineHeight":1.16,"underline":false,"overline":false,"linethrough":false,"textAlign":"center","textBackgroundColor":"","charSpacing":0,"path":null,"direction":"ltr","minWidth":20,"splitByGrapheme":false,"styles":{}}],"background":"#ffffff"}';
const height = 400;
const width = 400;
if (data) {
const timeA = performance.now();
const canvas = new fabric.StaticCanvas(null, { width: width, height: height });
canvas.loadFromJSON(data, function() {
var pngData = canvas.toDataURL({
format: 'png'
});
const timeB = performance.now();
process.stdout.write((timeB - timeA).toString());
})
}result times swapping to the other approach: const fabric = require("fabric").fabric
const fs = require('fs')
const {
performance,
} = require('perf_hooks');
const data = '{"version":"4.5.0","objects":[{"type":"image","version":"4.5.0","originX":"left","originY":"top","left":112.13,"top":75,"width":101,"height":200,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":0.75,"scaleY":0.75,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"cropX":0,"cropY":0,"src":"https://pisces.bbystatic.com/image2/BestBuy_US/images/products/5801/5801400_bd.jpg;maxHeight=200;maxWidth=200","crossOrigin":null,"filters":[],"isDeletable":false},{"type":"textbox","version":"4.5.0","originX":"center","originY":"center","left":150,"top":270,"width":300,"height":20.34,"fill":"#000000","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"text":"Apple - iPhone XR 64 GB - White","fontSize":18,"fontWeight":"normal","fontFamily":"Lato","fontStyle":"normal","lineHeight":1.16,"underline":false,"overline":false,"linethrough":false,"textAlign":"center","textBackgroundColor":"","charSpacing":0,"path":null,"direction":"ltr","minWidth":20,"splitByGrapheme":false,"styles":{}}],"background":"#ffffff"}';
const height = 400;
const width = 400;
if (data) {
const timeA = performance.now();
const canvas = new fabric.StaticCanvas(null, { width: width, height: height });
canvas.loadFromJSON(data, function() {
var pngData = canvas.lowerCanvasEl.toDataURL('image/png');
const timeB = performance.now();
process.stdout.write((timeB - timeA).toString());
});
}results Difference is minimal, and that is weird since we are basically saving a render. |
Beta Was this translation helpful? Give feedback.
-
|
oh ok i have more findings, i ll write you later. |
Beta Was this translation helpful? Give feedback.
-
|
So going this is an example json without images: this is my code for rendering and measuring const fabric = require("fabric").fabric
const fs = require('fs')
const {
performance,
} = require('perf_hooks');
const data = '{"version":"4.4.0","objects":[{"type":"circle","version":"4.4.0","left":23,"top":21,"width":100,"height":100,"fill":"#a41c84","opacity":0.8,"radius":50,"startAngle":0,"endAngle":6.283185307179586},{"type":"circle","version":"4.4.0","left":13,"top":164,"width":100,"height":100,"fill":"#05a224","opacity":0.8,"radius":50,"startAngle":0,"endAngle":6.283185307179586},{"type":"triangle","version":"4.4.0","left":144,"top":50,"width":50,"height":50,"fill":"#87a5af","opacity":0.8},{"type":"text","version":"4.4.0","left":129,"top":140,"width":598.13,"height":254.93,"fill":"#a3e3cf","scaleX":0.5,"scaleY":0.5,"angle":-7,"text":"Lorem ipsum dolor sit amet,\\nconsectetur adipisicing elit,\\nsed do eiusmod tempor incididunt\\nut labore et dolore magna aliqua.\\nUt enim ad mini","fontWeight":"","fontFamily":"helvetica","styles":{},"path":null}]}';
const height = 400;
const width = 400;
fabric.Object.prototype.objectCaching = false;
if (data) {
const timeA = performance.now();
const canvas = new fabric.StaticCanvas(null, { width: width, height: height });
canvas.loadFromJSON(data, function() {
const timeC = performance.now();
var pngData = canvas.toDataURL({ format: 'png' });
const timeB = performance.now();
process.stdout.write(`laodFromJson time: ${(timeC - timeA)}`);
process.stdout.write(`render time: ${(timeB - timeC)}`);
});
}those are the results: if i use the other approach: Render time on node is indeed quicker. Now if you can post the Konva pure render time maybe we can reason on what is going wrong. In my case with your data 750ms are spent loading the image. |
Beta Was this translation helpful? Give feedback.
-
Hi guys,
Can anyone think of a reason why Fabric.js would take x2/x3 more time vs Konva.js to generate a dataUrl (or SVG) from JSON in a Node CLI script?
The same canvas will generate in ~700ms with Konva and ~2s with Fabric.js.
It's my understanding that both use node-canvas for rendering but maybe I'm missing something that's making Fabric slower?
I've already built my app around Fabric so I'm really hoping we can find a solution :)
Fabric code extract:
Konva code extract:
Beta Was this translation helpful? Give feedback.
All reactions