Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium


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

Posted on 2008-11-20
Medium Priority
Last Modified: 2012-05-05
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.
Question by:divyasindhu
  • 3
  • 3
LVL 19

Expert Comment

by:Albert Van Halen
ID: 23002006
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">
	<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
	<style type="text/css">
		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;
	<title>Image portion</title>
	<img src="http://heritage.stsci.edu/2000/10/ngc1999/ngc1999_hst_b.jpg" alt="testImage" />
	<br />
	<div id="imagePortion"></div>

Open in new window


Author Comment

ID: 23002285
Hi AlbertVanHalen,
Thank you very much for the reply. The x y coordinates are not constant always.
I get the values from another screen.
LVL 19

Expert Comment

by:Albert Van Halen
ID: 23002316
Of course you can set the css properties dynamically using DOM.
object.style.backgroundPosition = "-70px -100px";
object.style.width = "150px";
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.


Author Comment

ID: 23002457
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
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
LVL 19

Accepted Solution

Albert Van Halen earned 2000 total points
ID: 23033302
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

Author Closing Comment

ID: 31518606
Thank you ver much. But I managed to solve it other way.

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

571 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question