T Shirt Design Tool Html5 Canvas
Welcome to the New Design Your Own T-Shirt Studio! We make it super easy to create a shirt online using your own custom design. Start on a blank white t-shirt canvas, or choose from hundreds of other apparel products including tank tops, sweatshirts, and long-sleeves. Use the tools on the upper right part of the page to start your design. Cover your body with amazing Html5 t-shirts from Zazzle. Search for your new favorite shirt from thousands of great designs! Get 11 online product design tool and t-shirt designer plugins and scripts on CodeCanyon. Buy online product design tool plugins, code & scripts from $9. T-shirt Designer, canvas, cards, custom product design, html5, iphone case, jquery, print design, product configurator, product designer, wordpress T-shirt Designer See all tags.
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
Daniel WhiteDaniel WhiteCanvas T-shirts Brand
2 Answers
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.
Canvas T-shirt Design
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.