How and why I built tool to convert PSD to Canvas to PDF/SVG/PNG/JPEG/JSON

About me

I am freelancer working in web application frontend and backend technologies/frameworks.

The problem I wanted to solve

I built a HTML5 Canvas template design editor
https://www.youtube.com/watch?v=maRI8v-lLtc

This canvas editor DOES NOT have option to import PSD designs into canvas. So i wanted to add a PSD import feature which will be very useful for users to customize the PSD and generate design.

What is Tool to convert PSD to Canvas to PDF/SVG/PNG/JPEG/JSON ?

https://www.youtube.com/watch?v=maRI8v-lLtc
This design editor can add image / svg elements / text / fonts / gradients etc.., to create template designs which can be customized. It does not have a option to Import PSD design.
So i created a seperate feature to import + convert PSD design into canvas and then customize and print. So that Imported PSD will be added to canvas and can be exported in PDF/SVG/PNG/JPEG formats after cusomization of objects in canvas.

Tech stack

Fabric JS (fabricjs.com) library.
HTML5 Canvas.
psd.rb (https://github.com/layervault/psd.rb) PSD parser library.
Angular (for view)
TCPDF (for pdf creation)
PHP (for image processing)

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.

Challenges I faced

Below are main challenges faced

1. browser based conversion first produced out of memory error when converting to base64 format.
   2.layer ordering, as the parsing and conversion is asynchronus, layers are not added into canvas.
   Both the challanges are fixed.

Key learnings

Browser based PSD parsers / editors to customize the PSD solutions are very less. So we need to fine tune this findings to make it work in the real time product.

Tips and advice

PSD.rb (https://github.com/layervault/psd.rb) is a main PSD parser developed in ruby, which has some upgrades / community managing this library.

Final thoughts and next steps

This is completed as a proof of concept for my canvas editors, it has more work to fine tune in terms of font / gradients / shadows object layer handling.

More details about other design editors i developed is in
http://kpomservices.com/CanvasToolsEditors.php