I have a client that is requesting that I make something similar to a shirt designer you'd see on a mainstream t-shirt site.
What it will require is for a user to be able to enter text in a text input and then drag the text around an image. I have 2 main concerns that if I can figure them out, I'll be able to do this project...
Concern 1: How can I get the text to drag around the image? My idea would be to use Jquery UI draggable to drag the text around the page. I would just use jquery to grab the value of the text input and put it in a div that is draggable. Does this sound like a good plan?
Concern 2: How do I take a snapshot of the main div that has the image of his shirt and the text in the position that he wants it so I can pass the image to the site owner? Is there some kind of script that will take a snapshot of the div? I've looked around for an answer to this and can't find much.
Any help is greatly appreciated
You may want to consider using an HTML5 canvas ( if it is supported by the browsers you need to support ). You would then be able to use a library such as this one: http://www.nihilogic.dk/labs/canvas2image/ For drag and drop, check out this link: http://html5.litten.com/how-to-drag-and-drop-on-an-html5-canvas/
If you must use jQuery to support client browsers, I don't believe there is a simple way to capture the image. What you could do however is to send the coordinates, width, font, font size and font-colour of the text on the tshirt to the server, and render the picture there. You can then load this picture back in the clients browser in a confirmation dialogue before they finalize their order. If this sounds reasonable, and you have access to the server environment, then what language are you programming in? PHP? Other?
You may also want to consider how it is that the site owner actually would create the tshirts that are made on the site. It could be that the coordinates of the text, as well as the font etc... are all he/she needs in order to make the shirt, as opposed to just a picture of what the final version should look like.