asked on

Uploading image and show square after showing on screen just like ORKUT

I am trying to upload an image ans show on screen, it works perfect!

now i am trying just like ORKUT, when u upload an image, it sows u the uploaded image and show a square on the part of image suppose 100 * 100 px to crop the image

how that could be done

please

i know this is something kind of jquery stuff, but i really need help in this

regards

Vipul Patel

There are different javascript plugins are available
please visit below link for those lista;

http://woork.blogspot.com/2009/02/best-image-croppers-ready-to-use-for.html

For complete sample, please visit below links;

http://www.mikesdotnetting.com/Article/95/Upload-and-Crop-Images-with-jQuery-JCrop-and-ASP.NET
http://www.webmotionuk.co.uk/php-jquery-image-upload-and-crop/

Coast Line

ASKER

Thanks but i think we are moving in right direction like we upload a picture and show on the screen, then now instead of drawing the crop cordinates from 0 to 100 px, i want that cropping square measuring 100 * 100 should automatically appaer in the middle of the screen which should be moveable but not resizeable

i hope i am clear this

reagrds

reiters

Is this what you are looking for?

Live demo here: http://www.keithreiter.com/examples/crop/

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<title></title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/cupertino/jquery-ui.css" type="text/css" />
</head>

<body>
<cfparam name="form.posted" default="0">

<cfif form.posted eq 1>
	<cfimage source="test.jpg" name="myImage">
	<cfset ImageResize(myImage, form.img_width, form.img_height)>
	<cfset ImageCrop(myImage, form.crop_left, form.crop_top, 100, 100)>
	<cfimage source="#myImage#" action="write" destination="new_test.jpg" overwrite="yes">
	<img src="new_test.jpg">
</cfif>

<cfif form.posted eq 0>
	<script type="text/javascript">
		$("document").ready(function() {
			$("#img_container").resizable({
				aspectRatio: true,
				resize: function() {
					$("#crop_box").css("left", $("#img_container").position().left);
					$("#crop_box").css("top", $("#img_container").position().top);
					}
				});
			$("#crop_box").draggable({ containment: $("#img_container") });
			$("#crop_box").css("left", $("#img_container").position().left);
			$("#crop_box").css("top", $("#img_container").position().top);
			$("#submit_it").click(function() {
				$("#crop_top").val( $("#crop_box").position().top );
				$("#crop_left").val( $("#crop_box").position().left );
				$("#img_width").val( $("#img_container").width() );
				$("#img_height").val( $("#img_container").height() );
				myform.submit();
				});
			});
	</script>
	
	<cfoutput>
		<cfimage action="info" source="test.jpg" structname="image_details">
		<br /><br />
		<div>
			<div style="position: relative;">
				<img id="img_container" src="test.jpg" border="0" width="100%" heigth="100%" style="width: #image_details.width#; height: #image_details.height#;">
				<div id="crop_box" style="border: 1px dashed red; width: 100px; height: 100px; position: absolute;">Drag Me</div>
			</div>
		</div>
		<form action="" id="myform" method="post">
			<input type="hidden" name="posted" value="1">
			<input type="hidden" name="crop_top" id="crop_top">
			<input type="hidden" name="crop_left" id="crop_left">
			<input type="hidden" name="img_width" id="img_width">
			<input type="hidden" name="img_height" id="img_height">
			<input type="button" value="Resize and Crop" id="submit_it">
		</form>
	</cfoutput>
</cfif>

</body>
</html>

Open in new window

Coast Line

ASKER

Thanks for the Update! here is my try and I am getting error

Either height or width is undefined.
Verify your inputs. Either height or width is undefined.

I tried dumping the form scope and found no values are going in to the resize button!

check this code Please

code of jquery included in head

<cfparam name="form.step" default="1">
<cfif form.step eq 2>
	<cfset resizeMe=ImageRead("#form.oldimage#")>
	<cfset imageresize(resizeMe, form.img_width, form.img_height)>
    <cfset path = '#request.basepath#images\inventory\'>
	<cfimage source="#resizeMe#" action="write" destination="#path#/#numberformat(ID,'0000')#_front1_original2.jpg" overwrite="yes">
    <cfset iname = '#numberformat(ID,'0000')#_front1_original2.jpg'>  
		Here is your resized image:<br />
	<cfoutput>
    	<img id="img_container" src="../images/inventory/#iname#">
	</cfoutput>
</cfif>

<cfif form.step eq 1>
	<script type="text/javascript">
	$("document").ready(function() {
			$("#img_container").resizable({
				aspectRatio: true,
				resize: function() {
					$("#crop_box").css("left", $("#img_container").position().left);
					$("#crop_box").css("top", $("#img_container").position().top);
					}
				});
			$("#crop_box").draggable({ containment: $("#img_container") });
			$("#crop_box").css("left", $("#img_container").position().left);
			$("#crop_box").css("top", $("#img_container").position().top);
				$("#submit_it").click(function() {
				$("#crop_top").val( $("#crop_box").position().top );
				$("#crop_left").val( $("#crop_box").position().left );
				$("#img_width").val( $("#img_container").width() );
				$("#img_height").val( $("#img_container").height() );
				myform.submit();
				});
			});
	</script>
	<cfimage action="info" source="../images/inventory/#url.img#" structname="image_details">
	<cfoutput>
    <div>
			<div style="position: relative;">
				<img id="img_container" src="../images/inventory/#url.img#" border="0" width="100%" heigth="100%" style="width: #image_details.width#; height: #image_details.height#;">
				<div id="crop_box" style="border: 2px dotted red; width: 100px; height: 100px; position: absolute;"></div>
			</div>
		</div>
	</cfoutput>
		<form action="" id="myform" method="post">
			<input type="hidden" name="step" value="2">
			<input type="hidden" name="crop_top" id="crop_top">
			<input type="hidden" name="crop_left" id="crop_left">
			<input type="hidden" name="img_width" id="img_width">
			<input type="hidden" name="img_height" id="img_height">
        <cfoutput>
        	<input type="hidden" name="oldimage" value="../images/inventory/#url.img#">
            <input type="hidden" name="passvalue" value="#url.img#">
            <input type="hidden" name="ID" value="#ID#">
        </cfoutput>    
		<input type="submit" value="Resize it" name="resize">
	</form>
</cfif>

Open in new window

reiters

First off, was that live example what you are looking for? I'll take a look at the code.

Coast Line

ASKER

The example you provide works perfect and fine

I do not where it messed up here

ASKER CERTIFIED SOLUTION

reiters

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Coast Line

ASKER

Hey! Thanks for the Update, but now i run in one more issue!

When i drag the image also, it crops to the wrong area, starting from left..

it should crop the only the selected area to which i have placed the cropping square, if i do not drag the image, it justy works fine

now suppose the image is bigger and i want to crop it, i will drag the image to make it bit smaller and then bring the selected square to crop a part of the image, it crops it but from worng part starting from LEFT

Please check

REgards

reiters

Can you post your code here again please. Make sure you only have the box draggable and the picture resizable. You should not be able to drag the image. Only resize the image. Does it work like you want on my live example?

Coast Line

ASKER

Yes Here it is!

The Code is attached with the following txt file
abc.txt

Coast Line

ASKER

I want that I uploaded the image, drag it and then crop it..

when it drags the image, cropping is not in right selection

reiters

Please let me know if the live example page I posted works correctly so I can narrow down where the issue is. If mine works then I need to look at your layout and styles. If it doesn't then I need to look at the core design.

Coast Line

ASKER

i recheked the example and i noticied some defect in it, when i drag it ad then move the drag square to crop some area, it just crops from the left

So need to check from there

Regards

reiters

I want to see what you see. Please resized and crop the picture to include just my dogs face. I will then look at the cropped version. I can't replicate what I think you are saying in ie, ff, or chrome. I don't have safari loaded. What browser are you using and if IE, what version.

Coast Line

ASKER

i am using all

ie 8, mozill alatest, safari, opera, cherome

Here are the Steps to produce the thing
I opened your website
1. Dragged the Crop Area and click Cop and Resize, it do it successfully. (Please note here i have not dragged the image)

I opened your website again
2. now this time i dragged the image a little bit to include some more space of a picture by making it big smaller and then drag the crop area to near the face of the dog, then i click the drag and dragged to near its face,
3. Now i clicked cop & resize
4. It did it successfully but the area included is from Left side of the image rather than from the chosen part of the Image, it starts itself from left most of time and i tested on few images, it do happens

reiters

Looking at your code I see you missed the line:
<cfset ImageResize(myImage, form.img_width, form.img_height)>
So you are cropping out of the image that the user resized but you are not resizing the image to match it in your code. The resizing on the screen is just a visual resize and does not change the real image. The line above does that.

Coast Line

ASKER

Thanks it works!

Only Issue, in IE 8, when i click border, it moves otherwise it does not move

Please confirm

REEgards

reiters

Since I can't load multiple IEs I can't test ie8, but I do know that different browsers handle it a little different. Try setting the color to white and opacity to 99%. It wil be too clear to see but might be act better.

reiters

Background color*