'Import PSD to canvas

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

canvasfabricjspsd


Solution 1:[1]

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:

  1. far too heavy compared to other formats (1MB+ vs 50kb)
  2. psd format is difficult to parse. the spec is not publicly available
  3. psd format takes much longer to parse than other formats
  4. you must require photoshop to create PSD content
  5. not open format so can't extend, can't fix bugs, can't upgrade
  6. 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.

Solution 2:[2]

Yes its possible to convert PSD to canvas (json for fabricjs)

The process of building Tool to convert PSD to Canvas to PDF/SVG/PNG/JPEG/JSON

  1. psd.rb / psd.js these PSD parser library is used to parse the imported PSD, and converted it as canvas objects.
  2. iterate the layers of the PSD objects.
  3. add the objects into canvas
  4. order the objects added.

More details can be found in https://www.codementor.io/kpomservices/how-and-why-i-built-tool-to-convert-psd-to-canvas-to-pdf-svg-png-jpeg-json-ykakhws33

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 1.21 gigawatts
Solution 2 Frederic Anand

Related Questions