how to display a portion of image when x1 x2 y1 y2 coordinates are given in html

There is a large image with dimensions lets say widht is 800  and height is 900. i want to display only a portion of this image say x1=100 y1=100 and x2=600 and y2=800
is it possible in html/javascript?
if so, please help.
divyasindhuAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Albert Van HalenAnalyst developerCommented:
You could use background-position (CSS) for this.
See my example : use background-image to specify the image for your element, and specify the width and height.
Next implement background-position and set the x/y start coordinates.
Your x/y end coordinates is the width and height of the element added with the start coordinates.

Just play with it...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
	<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
	<style type="text/css">
	#imagePortion
	{
		background-image: url('http://heritage.stsci.edu/2000/10/ngc1999/ngc1999_hst_b.jpg');
		background-position: -70px -70px;
		background-repeat: no-repeat;
		height: 150px;
		width: 150px;
	}
	</style>
	<title>Image portion</title>
</head>
<body>
	<img src="http://heritage.stsci.edu/2000/10/ngc1999/ngc1999_hst_b.jpg" alt="testImage" />
	<br />
	<div id="imagePortion"></div>
</body>
</html>

Open in new window

0
divyasindhuAuthor Commented:
Hi AlbertVanHalen,
Thank you very much for the reply. The x y coordinates are not constant always.
I get the values from another screen.
0
Albert Van HalenAnalyst developerCommented:
Of course you can set the css properties dynamically using DOM.
IE
object.style.backgroundPosition = "-70px -100px";
object.style.width = "150px";
etc..
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

divyasindhuAuthor Commented:
Hi AlbertVanHalen,
thank you again.....
but i dont know how to assign values dynamically. kindly help.
here is my requirement:
i have a jsp in which the user can upload  photo. this photo is shown on the screen

<img src="<html:rewrite page="<%=imageParam%>"/>" height="125" width="100" id="defaultImage" />
if the user selects crop photo, a pop up window is displayed where the user can select a portion of the image. i implemented it using Javascrip Image Cropper UI. the demo is here
http://www.defusion.org.uk/demos/060519/cropper.php?demoType=preview&image=castle&formSubmit=Load+demo
i did it successfully. after selecting the portion to crop, i am able to send the coordinate values to the parent window. now i want the parent window to display the cropped region.
i have the coordinate values for the image in hidden variables that are comming from the popup window. kindly give me the code which can solve my problem
0
Albert Van HalenAnalyst developerCommented:
Hi divyasindhu

A late response here, but I figured out how to do it.
Check the link you provided
There is a preview image there inside a div.

The div is relatively positioned and has a fixed height and width (in the example 120 by 120 pix)
It also has overflow set to hidden.
Inside is the preview image: absolutely positioned with attributes width and height (the width and height of image itself).
After cropping, style attributes of the image are set : width, height, top and left.

The style width is set to : (image width / cropped width) * preview width
The style height is set to : (image height / cropped height) * preview height
The style left is set to : - (crop start x / (cropped width / preview width))
The style top is set to : - (crop start y / (cropped height / preview height))

The outcome of the maths is ceiled with javascript Math.ceil()

Good luck
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
divyasindhuAuthor Commented:
Thank you ver much. But I managed to solve it other way.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.