I work on a designer tool where users can upload images, write text labels, etc... on an A4 paper. I am using canvas with KineticJS library, I have built the whole project on kineticJS. The result has to be printed in 300DPI size. As I have many layers, most of them images loaded by the user, rotated, resized, colored, etc...
I have managed to save the 300dpi png file using these steps:
- calculated what the designs 300DPI size is in pixels, got a variable
coef - set the stage size to be 300DPI (multiplied the actual width
and height with
coef) - went through all the layers and resized all the objects to 300DPI size the same way as the stage size
- used
stage.toDataURL()with a callback function to send the raw data to php - saved the raw data in PHP into a PNG file
This all works fine except that all the export runs on the client machine, using the memory of the device and the resources of the browser. This results a couple of seconds (sometimes more then 10) of "browser not responding" and frozes a bit the whole device.
My question is that is there a better way to export it into PNG? I was thinking on two things: 1. to find a better solution inside javascript (using kineticjs) 2. send all the data to PHP (list of layers and attributes) and rebuild it in PHP, then export it. The problem with this one is that I dont know if it will be able to rebuild it exactly the same as in canvas. And rebuilding the text labels would be a bunch of work/time and difficulty: it has color, strike color, strike width, font size, opacity and the most important thing is that it uses Google Fonts which I dont know how could be used in PHP.
I'm really counting on your opinions! Thanks!