1

I am looking to have a canvas export to 1500x1500 300dpi final product.

I am looking to drag and drop images only, no drawing into a canvas, to create something like a photobook/collage thing. So people will be dragging images from right panel into canvas, resize, rotate, etc.

It seems my best option is to render a 500x500 and track/record all image/object activity and then process/mimic the recorded actions to a larger file (1500x1500) in PHP, then save/export that file.

I dont think I want a browser to try to handle large canvas + high res images, and possible many images (15+) on the screen. (in local tests, it has crashed upon export a few times).

Basically using canvas as a preview mode (500x500), to create a photo collage, then PHP to export to large/hi res (1500x1500) - exactly to scale.

Looking primarily for documentation, direction or advice. Any things i need to look out for? possible issues? Advise is much appreciated.

Currently using FabricJS, but open to any solutions. Also any insight on achieving the 300dpi. Would consider hiring for this project, just looking to see best route to take, thanks.

joepwn
  • 57
  • 1
  • 7
  • Your required size is very much within the size limit of canvas. Here's what I'll do, display a scaled down canvas as a preview/edit and then recreate the whole thing/or copy the preview canvas (if possible without losing quality) to a hidden canvas of the final required size and then export the hidden canvas. But since you're getting bad performance on test, server side may be better option. Regarding the DPI, apparently you're out of luck as it depends on the device. I had a similar question recently http://stackoverflow.com/questions/14488849/higher-dpi-graphics-with-html5-canvas – redGREENblue Feb 18 '13 at 20:52

0 Answers0