I am building a application using fabricjs for creating the custom products.
I wanted to know if we can import the PSD files directly to canvas?
Like all the layers are automatically converted to canvas objects and are set with the appropriate properties.
Thanks Rahul
Answer
A PSD is not quite the same as a PNG, JPEG or GIF file but it is not far fetched to say it could be easily supported to various degrees if a browser manufacturers wanted to.
A PSD is different than other formats. The other graphic formats were designed specifically for transfer over networks. PNG stands for Portable Network Graphics. GIF stands for Graphical Interchange Format. JPEG stands for Joint Photographic Experts Group.
To contrast:
A PSD file stores an image with support for most imaging options available in Photoshop. These include layers with masks, transparency, text, alpha channels and spot colors, clipping paths, and duotone settings.
A PSD contains not only a composite layer that makes up the picture but all the layers used to create that composite image.
Compared the file of a PSD with a JPEG export of the PSD. The file size for the JPEG may end up being 50 to 100kb. The file size of the PSD may be 1mb>2GB. With a PSD you can continue to add layers upon layers of information.
People do not use PSD in the browser currently I think because of a couple of reasons:
- far too heavy compared to other formats (1MB+ vs 50kb)
- psd format is difficult to parse. the spec is not publicly available
- psd format takes much longer to parse than other formats
- you must require photoshop to create PSD content
- not open format so can't extend, can't fix bugs, can't upgrade
- if competing for time and better formats exists then adding support for PSD would be a step backward
As far as how to load a PSD in the browser, I think it's possible, but it will take some work to get there. You will need be able to read in a file as a byte array and then be able to create bitmap data.
The PSDParser classes are a set of ActionScript3 classes that can parse a PSD file into an array of PSD layers. These PSD layers have bitmap data, size, position, and more. Using that information you draw those bitmap images to the canvas.
BTW ActionScript3 is sibling to JavaScript. About 90% of the code can be interchangeable.