Thanks for reading this question :)
Goal:
I am using Fabric.js as a base for image editor (crop and resize features for now mostly).
My goal is to load some high-quality image (like photos) rotate or crop it and then export as DataURL (in original quality or near to it).
Solution:
To add such a big photo on canvas and be able to export it bad with the same quality - I set width and height of canvas equal to image's width and height (2560 × 1600px) and then compress it using css to 640x400px (editor size). (I used https://stackoverflow.com/a/17035046 as a base) In this case I still can export image in big dimension using canvas.toDataURL() - it will be about 2560x1600 (this is my goal).
How it works: http://jsfiddle.net/handmade/Lqsb0kwv/4/
Problem description:
I've got a problem after adding zoom feature (canvas.zoomToPoint(...)) to my editor and it is related to css width and height limitation of canvas.
Try to change size of image using controls in jsfiddle above and you will see an issue.
Works fine if...
...if I don't use css limitation: http://jsfiddle.net/handmade/Lqsb0kwv/5/
Questions:
I've read 90% of Fabric.js docs, examples, tutorials, questions here on Stack Overflow, but I didn't find a solution for my issue.
I am not sure that using css to limit canvas is a good practice.
I am not sure that my way of getting back changed image in big dimension is a good way.
Does anybody know better way to export image in good dimension?
Does anybody know if issue with scaling/rotating image after zoom (+limited by css) is a bug in Fabric.js?
Thank you for any answer!
