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
hello,
can anybody help me on this please?????
please get me some information...
please.....
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.
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> </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> </td>
<td><img src="images/img3.jpg" width="75" height="100" name="image1" onClick="frame_image(1)"></td>
<td> </td>
<td><img src="images/img2.jpg" width="75" height="100"name="image2" onClick="frame_image(2)"></td>
<td> </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> </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> </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"> </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> </td>
</tr>
</table></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</form>
</body>
</html>We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.