DaniWeb Forum Index > Web Development > PHP

Saving Images..

Please support our PHP advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Jul 2008

Posts: 1,073

Reputation: Shanti Chepuru is on a distinguished road

Solved Threads: 98

Shanti Chepuru Shanti Chepuru is offline

Offline

Veteran Poster

Saving Images..

Oct 1st, 2008

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

Be intelligent, But Don't try to cheat.. Be innocent But Don't get cheated..

•

Join Date: Jul 2008

Posts: 1,073

Reputation: Shanti Chepuru is on a distinguished road

Solved Threads: 98

Shanti Chepuru Shanti Chepuru is offline

Offline

Veteran Poster

Re: Saving Images..

Oct 6th, 2008

hello,
can anybody help me on this please?????

Be intelligent, But Don't try to cheat.. Be innocent But Don't get cheated..

•

Join Date: Jul 2008

Posts: 1,073

Reputation: Shanti Chepuru is on a distinguished road

Solved Threads: 98

Shanti Chepuru Shanti Chepuru is offline

Offline

Veteran Poster

Re: Saving Images..

Oct 7th, 2008

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

Be intelligent, But Don't try to cheat.. Be innocent But Don't get cheated..

•

Join Date: Jun 2008

Posts: 849

Reputation: R0bb0b is on a distinguished road

Solved Threads: 67

R0bb0b

Offline

Practically a Posting Shark

Re: Saving Images..

Oct 7th, 2008

•

Originally Posted by Shanti Chepuru

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.

“Be who you are and say what you feel because those who mind don't matter and those who matter don't mind.” - Dr. Seuss

-- The documentation is inevitable, you may get away with it for a little while but eventually you too will have to do the deed.

•

Join Date: Jul 2008

Posts: 1,073

Reputation: Shanti Chepuru is on a distinguished road

Solved Threads: 98

Shanti Chepuru Shanti Chepuru is offline

Offline

Veteran Poster

Re: Saving Images..

Oct 7th, 2008

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

 Help with Code Tags 
 php Syntax (Toggle Plain Text) 
<?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>
<?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>