making a square mark on image...and save it..how to?
Posted: Sat Apr 25, 2009 12:51 pm
hey guys...
Im having a trouble saving an image which i already mark it with a square mark with mouse drag. I manage to make a square mark. But when it come to save it, the image was saved WITHOUT the square mark on it. The image with square mark like below

The making "square mark" code (JavaScript - ImageEditor.php) is like below
And the save code is like below (PHP - processImage.php)
Im having a trouble saving an image which i already mark it with a square mark with mouse drag. I manage to make a square mark. But when it come to save it, the image was saved WITHOUT the square mark on it. The image with square mark like below

The making "square mark" code (JavaScript - ImageEditor.php) is like below
Code: Select all
<script type="text/javascript" />
ImageEditor.circle = function(){
var d;var posx;var posy;var initx=false;var inity=false
function getMouse(obj,e){
posx=0;posy=0;
var ev=(!e)?window.event:e;//Moz:IE
if (ev.pageX){//Moz
posx=ev.pageX+window.pageXOffset;
posy=ev.pageY+window.pageYOffset;
}
else if(ev.clientX){//IE
posx=ev.clientX+document.body.scrollLeft;
posy=ev.clientY+document.body.scrollTop;
}
else{return false}//old browsers
var target = (e && e.target) || (event && event.srcElement);
if(target.id=='Canvas'){
obj.onmousedown=function(){
initx=posx; inity=posy;
d = document.createElement('div');
d.className='square'
d.style.left=ImageEditor.w+'px';
d.style.top=ImageEditor.h+'px';
document.getElementsByTagName('body')[0].appendChild(d)
}
obj.onmouseup=function(){initx=false;inity=false;}
if(initx){
d.style.width=Math.abs(posx-initx)+'px';
d.style.height=Math.abs(posy-inity)+'px';
d.style.left=posx-initx<0?posx+'px':initx+'px';
d.style.top=posy-inity<0?posy+'px':inity+'px';
}
}
else{return false}
}
document.onmousemove=function(event){
getMouse(document,event);
}
ImageEditor.processImage("action=circle&x=" + posx + "&y=" + posy + "&w=" + initx + "&h=" + inity);
};
</script>
<div id="Canvas" style="width:ImageEditor.w; height:ImageEditor.h; border:solid black;"></div>Code: Select all
switch($action){
case "save":
copy($editDirectory.$imageName, $activeDirectory.$imageName);
break;
case "circle": // additional required params: x, y, w, h
$x = $_REQUEST["x"];
$y = $_REQUEST["y"];
$w = $_REQUEST["w"];
$h = $_REQUEST["h"];
if (!is_numeric($x) || !is_numeric($y) || !is_numeric($w) || !is_numeric($h)) { exit; }
if ($extension == "jpg" || $extension == "jpeg") {
$in = imagecreatefromjpeg($editDirectory.$imageName);
}
if ($extension == "gif") {
$in = imagecreatefromgif($editDirectory.$imageName);
}
if ($extension == "png") {
$in = imagecreatefrompng($editDirectory.$imageName);
}
$out = imagecreatetruecolor($w, $h);
imagecopyresampled($out, $in, 0, 0, $x, $y, $w, $h, $w, $h);
if ($extension == "jpg" || $extension == "jpeg") {
imagejpeg($out, $editDirectory.$imageName, 100);
}
if ($extension == "gif") {
imagegif($out,$editDirectory.$imageName);
}
if ($extension == "png") {
imagepng($out,$editDirectory.$imageName);
}
imagedestroy($in);
imagedestroy($out);
break;
}