grab image using mouse cordinates from screen

I have searched a lot but i could not find any proper solution for my requirement. I want a functionalty in my website where user can select any area on browser or anywhere开发者_如何学运维 in desktop and convert the selected area into image. I know this can be done in windows form,there you do have options to track mouse movements and capture image from screen. I know if i wan this functionality in web i have to get cordinates via javascript and hen maybe make an ajax request to webservice and get my image.

first of all i cannot find a proper way in javascript that will get me mousedown and mouseup coordinates.

I have seen jquery 's Dragable and resizable div.I want something lke that for user to select the area which has to be converted to image. I can even get Origal mouse position,Current mouse position and the size of div using jquery dragable and reszable div.

and Second i want some advice as to how i should grab the selected area as image.

Kindly help me out.

Not possible with JavaScript. Web pages are (intentionally!) not capable of tracking mouse movements outside the browser window, nor of reading an image off the user's desktop.

You mean something similar to: http://www.screenr.com/record ?

You can use the clientX and clientY of an event to get the mouse coordinates. For example:

http://jsfiddle.net/yN3S5/1/

HTML:

<p id="x" ></p>
<p id="y" ></p>

Javascript:

document.onmousemove=function(e){
    x=document.getElementById('x');
    y=document.getElementById('y');
    x.innerHTML=e.clientX;
    y.innerHTML=e.clientY;
}

First, to convert your page to image, there is a very cool library that can do that. Its use the canvas, and render on it the full page by reading it

Get the code and see the examples from here.

http://html2canvas.hertzen.com/

Once you have the page in canvas you can thn conver it to png and get a part of it by selecte it.

See this example ! http://hertzen.com/experiments/jsfeedback/examples/dusky/index.html

Click on the send feedback, then select an area on the page, then click on preview ! Its very near for what you ask, but instead make a red rectangle you cut this part of the image.

more examples like the last one : http://hertzen.com/experiments/jsfeedback/

Forget to capture anything outside the browser.