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

fabricjs call to canvas.toDataURL() resizes the dimensions of the canvas #4252

Closed
joemanfoo opened this issue Aug 28, 2017 · 2 comments · Fixed by #4254
Closed

fabricjs call to canvas.toDataURL() resizes the dimensions of the canvas #4252

joemanfoo opened this issue Aug 28, 2017 · 2 comments · Fixed by #4254

Comments

@joemanfoo
Copy link

I've posted this behavior on stackoverflow here: https://stackoverflow.com/questions/45908772/fabricjs-call-to-canvas-todataurl-resizes-the-dimensions-of-the-canvas

and per @asturur answer I'm creating an issue for the bug.

I'm using fabricjs 1.7.17 and have seen this issue below on IE Edge, Chrome and Firefox.

where the canvas is being set with a width and height in HTML of 768px.

Within my fabricjs canvas init I've got:

editor.canvas = new fabric.Canvas('editor')
editor.canvas.setDimensions({
  width: 1080,
  height: 1080,
  allowTouchScrolling: false,
  backgroundColor: 'rgba(55, 55, 55, .33)',
  rotationCursor: 'url(/static/img/rotate.cur) 10 10, crosshair'
}, {backstoreOnly: true})

The problem is when you call the editor.canvas.toDataURL() method the size of the goes from 768px to 1080px

If you call the browser's native canvas.toDataURL() method there isn't a jump in size.

Anyone bump into this and have a possible fix?

Here's a simplified jsfiddle: https://jsfiddle.net/m8dhmbtu/23/

Click on the "Native Canvas.toDataURL()" and you'll get the results to console.log and there will be no change to the displayed canvas in the preview window.

Click on the "Fabricjs canvas.toDataURL()" and you'll also get the results (the same correct png data) to console.log however; you'll also get a jump in the size of the in the preview window...this is what I'm trying to prevent.

@asturur
Copy link
Member

asturur commented Aug 28, 2017

Hello, i answered your question on stackoverflow.
I believe there is something to fix, i ll do when i m back from holiday probably.

there are 2 things to take in account:

who does not resize the canvas can use the same logic is in place now with a simple fix.

who resize the canvas can as well use the current logic adding backstore dimensions only resize, fixing the problem but at cost of an unefficent twice resize and cache invalidation.

so a simple fix is very simple and consist of adding the backstoreOnly true to the 2 resizes in the toDataUrlWithMultiplier function if you want to give it a shot.

joemanfoo added a commit to joemanfoo/fabric.js that referenced this issue Aug 28, 2017
adds the backstoreOnly to __toDataURLWithMultiplier's setDimensions calls to prevent the canvas from resizing in the browser window when the canvas.toDataURL() method is called per issue fabricjs#4252
@joemanfoo
Copy link
Author

@asturur - that fixed the issue. Thank you!
I don't know how to make a pull request into this repo - (git neophyte here) - but can sort that out when you return from your holiday. Thank you greatly for taking a look while you are on holiday

asturur added a commit that referenced this issue Aug 29, 2017
adds the backstoreOnly to __toDataURLWithMultiplier's setDimensions calls to prevent the canvas from resizing in the browser window when the canvas.toDataURL() method is called per issue #4252
rkrueger11 pushed a commit to FlowMSP/fabric.js that referenced this issue Sep 6, 2017
adds the backstoreOnly to __toDataURLWithMultiplier's setDimensions calls to prevent the canvas from resizing in the browser window when the canvas.toDataURL() method is called per issue fabricjs#4252
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 a pull request may close this issue.

2 participants