0

Hello Every Body

I Am Using PHP AND JAVASCRIPT

i am using two images on my page
at run time
1. first i drag one image on another
2. after that i write some text using a prompt box which is written on the dragged image at run time
3. Now at run time i want to save this final image which looks like above file

can any one Help Me

2
Contributors
4
Replies
5
Views
8 Years
Discussion Span
Last Post by Shanti C
0

please get me some information...
please.....

Do you have something put together online so that we can look at it? I'm just not exactly sure if I know exactly what you are talking about.

0

this is my code...
i can't get what i want to try:
please help me:

<?php
if($_SERVER['REQUEST_METHOD']=='POST' ){
header('Content-type: image/jpeg');
$tube = imagecreatefromgif("themes/New Folder/imgb3.gif");
$gold = imagecreatefromjpeg("images/myimage.jpg");
//$code = imagecreatefromgif("images/ICMcode.gif");
imagecopy($tube, $gold, 75, 50, 0, 0, 75, 100);
//imagecopymerge($tube, $gold, 200, 15, 0, 0, 200, 200, 100);
//imagecopymerge($tube, $gold, 135, 15, 0, 0, 200, 200, 100);
//imagecopymerge($tube, $code, 100, 10, 0, 0, 200, 200, 30);
//imagecopymerge($tube, $code, 200, 10, 0, 0, 200, 200, 30);
//imagecopymerge($tube, $code, 150, 10, 0, 0, 200, 200, 100);
imagejpeg($tube);echo $tube;
imagedestroy($tube);
imagedestroy($gold);
imagedestroy($code);
}
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script language="JavaScript">

/*

INFORMATION:
============

Copyright 2001 by CodeFoot.com
Free for all users, but leave in this notice

For IE4.X and later; degrades gracefully.

INSTRUCTIONS:
=============

Step One:
---------

Place this script in the head of the page.
Set the six dimensioning variables where
shown in the script (below).

Step Two:
---------

In the body, give each image a unique name
and attach the functions as shown:

<img src="someimage.jpg"name="imageOne"width="100" height="100"onDrag="dragResizeImage(event,this.name)"
onClick="clickResetImageSize(this.name)">

<img src="anotherimage.jpg"
name="imageTwo"
width="100" height="100"
onDrag="dragResizeImage(event,this.name)"
onClick="clickResetImageSize(this.name)">

Any number of images may be used; however, 
all should usually be the same default size.

Step Three:
-----------

Add the iBeReady variable to an onload event
in the body tag:

<body onload="iBeReady=true;">

*/

// THE SCRIPT:
// ===========

// sets the default size of the image(s)
defaultXsize = 100;
defaultYsize = 100;

// sets the minimum size of the image(s)
minimumXsize = 50;
minimumYsize = 50;

// sets the maximum size of the image(s)
maximumXsize = 250;
maximumYsize = 250;

// Do not edit below this line.
// ----------------------------

iBeReady =  false;

function dragResizeImage(dragEvent,which){
alert(which);
if (iBeReady){
posX = eval("document."+which+".offsetLeft");
posY = eval("document."+which+".offsetTop");
newXsize = dragEvent.x;
newYsize = dragEvent.y;
newXsize = newXsize - posX;
newYsize = newYsize - posY;
if (newXsize >= maximumXsize) newXsize = maximumXsize;
if (newYsize >= maximumYsize) newYsize = maximumYsize;
if (newXsize <= minimumXsize) newXsize = minimumXsize;
if (newYsize <= minimumYsize) newYsize = minimumYsize;
eval("document."+which+".width=newXsize");
eval("document."+which+".height=newYsize");
}
}

function clickResetImageSize(which){
if (iBeReady){
eval("document."+which+".width=defaultXsize");
eval("document."+which+".height=defaultYsize");
}
}
  
function frame(id){
document.getElementById("div1").setAttribute("background","themes/New Folder/imgb"+id+".gif");
}
function frame_image(id){
document.getElementById("div2").setAttribute("src","images/img"+id+".jpg");
}


</script>
<style type="text/css">

.drag{
position:relative;
cursor:hand;
z-index: 100;
}

</style>
<script type="text/javascript">

/***********************************************
* Drag and Drop Script: © Dynamic Drive (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

var dragobject={
z: 0, x: 0, y: 0, offsetx : null, offsety : null, targetobj : null, dragapproved : 0,
initialize:function(){
document.onmousedown=this.drag
document.onmouseup=function(){this.dragapproved=0}
},
drag:function(e){
var evtobj=window.event? window.event : e
this.targetobj=window.event? event.srcElement : e.target
if (this.targetobj.className=="drag"){
this.dragapproved=1
if (isNaN(parseInt(this.targetobj.style.left))){this.targetobj.style.left=0}
if (isNaN(parseInt(this.targetobj.style.top))){this.targetobj.style.top=0}
this.offsetx=parseInt(this.targetobj.style.left)
this.offsety=parseInt(this.targetobj.style.top)
this.x=evtobj.clientX
this.y=evtobj.clientY
if (evtobj.preventDefault)
evtobj.preventDefault()
document.onmousemove=dragobject.moveit
}
},
moveit:function(e){
var evtobj=window.event? window.event : e
if (this.dragapproved==1){

this.targetobj.style.left=this.offsetx+evtobj.clientX-this.x+"px"
this.targetobj.style.top=this.offsety+evtobj.clientY-this.y+"px"
return false
}
}
}

dragobject.initialize()

</script>
<style type="text/css">
<!--
#Layer1 {
	position:absolute;
	left:138px;
	top:205px;
	width:23px;
	float:inherit;
	height:190px;
	z-index:100;
}
#layer2 {
	position:absolute;
	left:138px;
	top:205px;
	width:23px;
	height:190px;
	z-index:1;
}
#Layer2 {
	position:absolute;
	left:322px;
	top:685px;
	width:269px;
	height:262px;
	z-index:2;
}
-->
</style>
<!--shanti functions-->
</head>
<body onLoad="iBeReady=true;">
<form name="form1"  action="" method="post" onSubmit="return shanti();">
 <table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><table width="95%" border="0" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td><table width="0%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td>&nbsp;</td>
            <td><img src="images/img3.jpg" width="75" height="100" name="image1" onClick="frame_image(1)"></td>
            <td>&nbsp;</td>
            <td><img src="images/img2.jpg" width="75" height="100"name="image2" onClick="frame_image(2)"></td>
            <td>&nbsp;</td>
            <td><img src="images/img4.jpg" width="75" height="100" class="drag" name="image2113" onDrag="dragResizeImage(event,this.name)" onClick="frame_image(3)"></td>
            <td>&nbsp;</td>
            <td><img src="images/img6.jpg" width="75" height="100" name="image3" onClick="frame_image(4)"></td>
          </tr>
        </table></td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td align="center"><table width="95%" border="0" align="right" cellpadding="0" cellspacing="0">
      <tr>
        <td><table width="98%" border="0" align="center" cellpadding="0" cellspacing="0">
          <tr>
            <td bgcolor="#F5F3F6"><img src="fiji-html/fiji-html/images/spacer.gif" width="1" height="1"></td>
          </tr>
          <tr>
            <td><table width="100%" border="0" cellspacing="0" cellpadding="5">
              <tr>
                <td><img src="themes/New Folder/newfeats.jpg" width="55" height="55"></td>
                <td><p style="text-align: justify;">We have added a designer canvas for your creative outlet</p>
                  <p style="text-align: justify;">You  can place a photo, add designer borders, spice up with some designs,  and customize with your personal text and/or choose from a bunch of our  pre-formatted texts for any occassion !!</p></td>
              </tr>
            </table></td>
            </tr>
          <tr>
            <td bgcolor="#F5F5F7"><img src="fiji-html/fiji-html/images/spacer.gif" width="1" height="1"></td>
          </tr>
          <tr>
            <td><table width="0%" border="0" align="center" cellpadding="0" cellspacing="0">
              <tr>
                <td width="150"><img src="themes/New Folder/ts_bg.jpg" width="150" height="250"></td>
                <td width="260" background="themes/New Folder/tshirt_bg.jpg " id="div1" >
			<img src="themes/New Folder/tshirt_bg.jpg" name="div2" width="110" height="75" class="drag" id="div2"  onClick="return doSomething(this);">
					</td>
                </tr>
            </table></td>
          </tr>
        </table></td>
        <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td><table border="0" cellspacing="0" cellpadding="6">
              <tr>
                <td width="50" align="center" bgcolor="#F6F6F8">Borders</td>
                <td align="center">&nbsp;</td>
                <td width="50" align="center" bgcolor="#FBFBFD">Text</td>
              </tr>
            </table></td>
          </tr>
          <tr>
            <td><table width="100%" border="1" cellpadding="8" cellspacing="0" bordercolor="#C0BDBC">
              <tr>
                <td><img src="themes/New Folder/img1.gif" width="86" height="80" onClick="frame(1)"></td>
                <td><img src="themes/New Folder/img2.gif" width="79" height="80"onClick="frame(2)"></td>
              </tr>
              <tr>
                <td><img src="themes/New Folder/img3.gif" width="80" height="80"onClick="frame(3)"></td>
                <td><img src="themes/New Folder/img4.gif" width="80" height="80"onClick="frame(4)"></td>
              </tr>
              <tr>
                <td><img src="themes/New Folder/C080_bg_11_web.gif" width="80" height="80"></td>
                <td><img src="themes/New Folder/C080_bg_15_web.gif" width="80" height="80"></td>
              </tr>
            </table></td>
          </tr>
        </table>          </td>
      </tr>
      <tr>
        <td align="center"><label>
          <input type="submit" name="Submit" value="Submit">
        </label></td>
        <td>&nbsp;</td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>
</form>
</body>
</html>
This question has already been answered. Start a new discussion instead.
Be sure to adhere to our posting rules.