Render miniPaint json as image on the server, without frontend

[marcpre]

Hello,

thank you sir for creating miniPaint.

I love the minipaint application. I want to extend it by rendering the json that a user creates as an image on the server.

So the flow should look like that:

1. User creates image with miniPaint
2. User sends json to server
3. Server changes certain text of a field in the json
4. Server renders the json to an image and saves it on the server
5. User receives the url of the image back

I am struggeling with part 3), where the server renders the json as an image without a frontend

How would you approach this?

[viliusle]

Hello, 3. server takes JSON, decodes it, edits it, encodes and sends modifed JSON back to frontend. 4. frontend gets modified JSON, generates PNG/JPEG, sends to server. 5. server gets PNG/JPEG, saves it, generates public URL and sends URL back to frontend.

[viliusle]

JSON example - https://github.com/viliusle/miniPaint/blob/master/images/test-collection.json Raw image data will be encoded using standart data URL - https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URLs

[viliusle]

I do not recommend rendering JSON on server as image, it would be too difficult. Unless using headless browser with miniPaint on server, but that would not be easy too. So you need to send data multiple times.

[marcpre]

@viliusle Thank you for your answer!

One solution I was thinking was to load the miniPaint JSON as a canvas variable and then using node-canvas to save the file as PNG.

What do you think about this way of solving it?

I am currently trying to understand how miniPaint loads the JSON file on the canvas when a user opens the json. Any help where to find this?

I appreciate your reply!

PS.: Btw I am a big fan of miniPaint. Its awesome! ;)

[marcpre]

@viliusle What do you think about the above way of rendering the json to an image on the server-side?

[viliusle]

I can not help you there.

[Giwayume]

@marcpre

Each layer in minipaint is associated with a tool that edits and renders that layer.

For example, if you have a brush layer, the canvas rendering code for that layer is in the brush.js render function (accepts the canvas context and the layer object from the JSON).

In theory you can loop through the layers, leveraging the existing render functions for each tool to draw to a canvas that you create with node-canvas.

The only exception to this rule is "image" layers which are rendered directly in base-layers.js. "object.link" is a HTMLImageElement object that is created based on the base64 representation of the image in the JSON.

Layer compositing is also handled in base-layers.js.

For sanity sake, I'd suggest just ripping out the code you need and create a simplified server-side version of the renderer. There's a lot of code in those files you don't need at all.