Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Create a different dataUrl #5452

Merged
merged 7 commits into from
Dec 30, 2018
Merged

Create a different dataUrl #5452

merged 7 commits into from
Dec 30, 2018

Conversation

asturur
Copy link
Member

@asturur asturur commented Dec 29, 2018

This is the first step to get a better higher resolution render.

  • toCanvasElement is added as a method, and return a canvas element painted with the content of the canvas, same features of toDataUrl
  • toDataUrl will use that canvas to generate a dataUrl

@melchiar
Copy link
Member

Cool! Just curious, how would this differ from the current toDataUrl with multiplier method as far as outputting high res images?

@asturur
Copy link
Member Author

asturur commented Dec 30, 2018

So current export toDataUrl and generically renders at high res ( like 10k x 10k or 16k x 16k where browser can do it ) are made blurry by the cache system that cannot go higher than a certain limit ( since cache is built for performance rather than exporting images ).

Now since clipPath, cache is no more an option.
Before clipPath you could disable objectCaching for each object, render with high multiplier, re enable caching afterwards.

That would invalidate all caches, and recreate them, but give you a clean hi res export.

Now you cannot do that anymore if you use clippaths.

This is a first change:
it gives you a middle man between your canvas and a dataUrl that produce a htmlCanvasElement painted with your canvas content. This htmlCanvasElement is a copy and you can use it for something else ( display, filter... is an image that does not need to go trough a load from dataUrl ).

The other change, that i already developed and i need to adapt to clipPath, is a different render method that will avoid using cache.
It will eventually use more memory and be a bit slower, but will give you a clean export without invalidating all the object caches of your current canvas.

@asturur
Copy link
Member Author

asturur commented Dec 30, 2018

this precise commit is adding a public method, removing a private one, and not changing any output but is saving a renderAll and a canvas resize when used with multiplier.
#5453
this is a TEST-ONLY Pr to validate that we are not breaking stuff with this change.

@asturur
Copy link
Member Author

asturur commented Dec 30, 2018

and indeed i broke.
saint tests.

@asturur
Copy link
Member Author

asturur commented Dec 30, 2018

unsure why the function coverage is dropped to 79.31% from 80%. like if 8 functions are not more tested.

@asturur asturur merged commit a8bdd40 into master Dec 30, 2018
@asturur asturur mentioned this pull request Jan 7, 2019
@asturur asturur deleted the better-data-url branch May 19, 2019 19:30
thiagocunha pushed a commit to thiagocunha/fabric.js that referenced this pull request Nov 18, 2019
* changed toDataUrl

* ok not broken

* ok not broken

* fix

* missed the offscreen
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants