Page 1 of 1

making a square mark on image...and save it..how to?

Posted: Sat Apr 25, 2009 12:51 pm
by azhan
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

Image

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>
And the save code is like below (PHP - processImage.php)

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;
}

Re: making a square mark on image...and save it..how to?

Posted: Mon Apr 27, 2009 4:32 am
by Sindarin
I don't know what you are trying to achieve but wouldn't it be easier to style the image giving it a red border with CSS?

Re: making a square mark on image...and save it..how to?

Posted: Tue Jun 23, 2009 1:52 am
by Popcorn
i'm not sure the script is doing what you expect. it's purpose looks like to allow you to specify a crop area, and then save the cropped image. it is not a drawing tool. is it really useful to have a red border afterwards anyway?