Modify & Export a PNG

Question

A while ago I had created a small system that would allow one to select various images to use in a forum signature that were all designed to fit together (see example image below). This is currently done by having a series of images that get referenced by their names, which folder they're in, and suffixes in the image names.

I would like to create a system where one could modify these all they wanted. I tried looking up a few different ways to do it, however was unsuccessful in finding any way that would be able to do what I'm aiming to do here.

The original images are made in Photoshop and separated into individual layers based on the type of banner. Ideally I'd love to make a system that would allow one to modify the colours (RGB, slider, something like that), change the icon either by a set of preset icons or uploading their own, and the ability to modify the text on the images.

After all is said and done, I'd like the image pieces to be downloadable so they're not stored server-side. In addition I'd like to do this without having to export every variation possible, since that's already a nuisance with the current way it's doing things.

TL;DR: Is there any way a user could modify a set of parameters to change colours, icons, or text, then download the result as a PNG? Code type does not matter, I'm willing to learn, just want to know the right direction.

Here's a download of the current code for anyone interested.

https://dl.dropboxusercontent.com/u/90098446/website.zip

Example Image (ignore the white lines):

score 1 · Answer 1 · answered Oct 21 '16 at 04:45

1

Seems like each banner has four layers: banner, icon, text, and optional tears.

Save the individual layers and assemble them via javascript on the front-end. Arranging the parts as sprite sheets may make this more convenient both for editing in Photoshop and for assembling programmatically.

When the user wants to download the results, send a description of the assembly to the back-end, have the back-end assemble the parts into an image, and offer the image for download.

Rather than manually assembling each possibility in Photoshop, you instead let the system assemble it on demand.

answered Oct 21 '16 at 04:45

Ouroborus

16,237
4
39
62

I've debated something along these lines, however how does one have the system assemble & export the image from the PSD in this case? In addition, would one be able to modify the text and colours of the banners with this method? Lastly what would be the optimal code to use for this type of system? – Korvic Oct 21 '16 at 04:51
@Korvic They'd have to be flat images. It's not really feasible doing it straight from the PSD. Modifying the text is doable, assuming you have a font available. Modifying the colors of the banners will depend on what kind of modification you want. If the banners are in gray scale, overlaying a solid transparent color will tint them. If you want the border stripe to be a different base color, that'll mean having another layer. It's not an easy system to convert to since it's an end-to-end strategy and you've already built everything but I believe life will be a lot simpler once it's done. – Ouroborus Oct 21 '16 at 05:00
@Korvic Rearranging the PSD would make exporting to sprite sheets easier, as well. – Ouroborus Oct 21 '16 at 05:01
@Korvic There isn't really an optimal language as such (if I'm interpreting your question right). You may as well stick with what you've already used. – Ouroborus Oct 21 '16 at 05:05

score 1 · Answer 2 · edited May 23 '17 at 12:06

I have actually done something like this. You need to use a canvas in your HTML and to have a finite number of possible images or possibly some Javascript functions to draw the thing the user wants. Those images/functions should be put together in your canvas to enable the user to preview what is his picture and a control set to change things.

This SO post shows you how you can get a png from a canvas. I suggest that you should have a save button, where the user finalizes the picture and this should send the picture to the server, where it will be stored. The download feature should download that picture.

I have done this differently. I have used canvas as a preview and when the user finalized the settings, those were sent to the server as JSON where the final picture was put together.

Modify & Export a PNG

2 Answers2