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

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
azhan
Forum Commoner
Posts: 68
Joined: Fri Jun 27, 2008 6:05 am

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

Post 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;
}
User avatar
Sindarin
Forum Regular
Posts: 521
Joined: Tue Sep 25, 2007 8:36 am
Location: Greece

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

Post 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?
User avatar
Popcorn
Forum Commoner
Posts: 55
Joined: Fri Feb 21, 2003 5:19 am

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

Post 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?
Post Reply