Page 1 of 1

online tshirt design

Posted: Sat Apr 22, 2006 1:54 pm
by lanny
i currently doing a online tshirt design website where user customise their own shirt by adding text on the shirt.
So, how the text will be placed on top of shirt when user input their text?
i'hv told that to use php generated image to make a text image.....but after generated the text image..it cant placed on top of the shirt..anyone solutions for dat?

thanks in advance

Posted: Sat Apr 22, 2006 2:18 pm
by timvw
Allow them so choose the postion on the t-shirt? Simply X-Y input boxes should be sufficient.

Perhaps this can be made more user-friendly with the addition of javascript/flash that displays a movable x/y axis over the tshirt to choose that position...

Posted: Sat Apr 22, 2006 8:48 pm
by lanny
it is actually just place the text at the center of the shirt....but the php generated image cant display over the shirt,,how/

Posted: Sat Apr 22, 2006 10:10 pm
by feyd
Here's an idea: using a div, two <img> tags, and some CSS you could MacGyver their image underneath a partially transparent overlay of the t-shirt acting as a mask. Their image can then be moved around, resized all from the comfort of their browser using Javascript. No server interaction necessary until a submission is made. They wouldn't even have to upload the image until that submission if you did it a certain way.

Posted: Sat Apr 22, 2006 10:16 pm
by lanny
i dont really understand, can u please explain more?....hmm..can i create a php generated image on the shirt?

Posted: Sat Jun 10, 2006 8:43 pm
by derchris
Merge the Text and the T-Shirt Image.
That should be pretty easy with GD and some line code.

Posted: Sat Jun 10, 2006 10:43 pm
by wtf
Flash will be the easiest and most efficient solution for this.

Posted: Sun Jun 11, 2006 3:17 am
by bokehman
feyd wrote:They wouldn't even have to upload the image until that submission.
Unless I am missing something (probably!) the sandbox doesn't allow that behaviour in Firefox and Netscape. It does seem to work in Internet Explorer though as discovered in the following test.

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
     
<script type="text/javascript">
function load_image(input)
{
	tee_shirt_img = document.getElementById('tee_shirt_img')
	tee_shirt_img.src = 'file:///' + input.value
	tee_shirt_img.style.display = ''
}
</script>

<title></title>

</head>

<body>

<form action="" enctype="multipart/form-data" method="post">
<p><input type="file" name="file" onchange="load_image(this)"></p>
<p><img id="tee_shirt_img" style="display:none"></p>
</form>

</body>

</html>