Image Manipulation Suggestions?

Hi everyone,

I am a product manager/designer/non programmer. I have some light programming background and can do basic front-end work in html/css etc.

We are developing a web app that creates a custom image from 3 source images and also has some text.

I need to be able to do the following:

• image resizing
• precise pixel-by-pixel placement (of 3 image layers)
• combine 3 image layers
• user input text from specific typeface
• Creation of end-result needs to be done by the end-user with our tool (ie. not manually by us)

Output:

• a transparent background image file (.png or .svg)
• high resolution (same as source files, not degraded/compressed or at least I can control the compression)

What is the best way to acheive this?

Is there an easy/less software intensive way to achieve this, maybe something already out-of-box we can use?

This project is a hackathon, and only 1 month so its ambitious. I am trying to find out how complicated the above are, what tools, options, and what the easiest way to achieve this is. From my own "duct tape" solution, I might be able to do it in CSS and use a simple screenshot of the image for a specific part of the browser window, but resulting image needs some transparency (around borders).