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

Posted on 2008-11-20
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
    LVL 19

    Expert Comment

    by:Albert Van Halen
    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" "">
    <html xmlns="">
    	<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    	<style type="text/css">
    		background-image: url('');
    		background-position: -70px -70px;
    		background-repeat: no-repeat;
    		height: 150px;
    		width: 150px;
    	<title>Image portion</title>
    	<img src="" alt="testImage" />
    	<br />
    	<div id="imagePortion"></div>

    Open in new window


    Author Comment

    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
    Of course you can set the css properties dynamically using DOM.
    IE = "-70px -100px"; = "150px";

    Author Comment

    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

    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

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

    Featured Post

    Highfive Gives IT Their Time Back

    Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

    Join & Write a Comment

    I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
    This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
    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…

    733 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

    Need Help in Real-Time?

    Connect with top rated Experts

    19 Experts available now in Live!

    Get 1:1 Help Now