Jquery Shirt Designer - HOW?

Question

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

Solution 1

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.

Solution 2

Take a look at FabricJS: http://fabricjs.com/ and especially the kitchensink demo: http://fabricjs.com/kitchensink/

You can do the text modifications you want and afterwards export it to SVG.

Comments

[Daniel White]

I definitely do need to be able to support most browsers. Firefox and IE10, 9, and 8 at least. The site owner owns a textiles company so he is more or less looking for an image to see how the client wanted the text. Then he will make the item as closely as possible to the image. I'm thinking your idea of re-rendering the image for the client at checkout as well as for the admin when he pulls the order is probably the best idea. I'm going to be using the codeigniter framework to code this with jquery and php. Any more thoughts. I like the track you're on.

[Mike Blouin]

Okay, well until you drop IE8 support the canvas solution definitely won't work. However, seeing as you'll already know the x/y coordinates of the font, as well as the size and colour of the text, then I would recommend using something like the php ImageTTFText library available here: php.net/manual/en/function.imagettftext.php . You would first load up the base shirt image, then insert the text using the above library. You may also need to do a bit of math to see if all of the characters will fit on one line. I don't know if this wraps. If you need more help, I can edit my answer.

[Daniel White]

So are you saying to have the client use the draggable / droppable jquery ui to drag around the text where they want it, then based on the coordinates when they hit the submit button, use the imagettftext function to basically make a static image of the shirt with the text on top. That actually sounds totally doable.

[Mike Blouin]

Thats exactly it. You'll also want to grab things like the width of the box, and how many lines the text takes up. Additionally, if you need to support anything like centering I would suggest figuring out the width of each line of text on the client side, and sending that to the server as it is difficult to figure out how much space a block of text takes up in a certain font with things like kerning etc... All in all though, a bit of math and a small amount of JS trickery and this shouldn't be that bad.