使用鼠标坐标从屏幕抓取图像

grab image using mouse cordinates from screen

本文关键字：屏幕 抓取 图像 坐标 鼠标      更新时间：2023-09-26

我已经搜索了很多，但我找不到任何合适的解决方案，我的要求。我想在我的网站功能，用户可以选择浏览器上的任何区域或在桌面的任何地方，并将选定的区域转换为图像。我知道这可以在windows中完成，在那里你有跟踪鼠标移动和从屏幕捕获图像的选项。我知道，如果我想这个功能在web我必须通过javascript获得坐标，然后可能使一个ajax请求到webservice，并得到我的图像。

首先，我在javascript中找不到一个合适的方法来得到我的mousedown和mouseup坐标。

我已经看到了jquery的可拖动和可调整大小的div，我想让用户选择需要转换为图像的区域。我甚至可以得到原来的鼠标位置，当前鼠标位置和使用jquery可拖动和可调整divdiv的大小。

第二，我想要一些建议，我应该如何抓取选定的区域作为图像。

请帮帮我。

JavaScript不支持。网页(故意的!)不能跟踪浏览器窗口外的鼠标移动，也不能读取用户桌面上的图像。

你的意思是类似于:http://www.screenr.com/record ?

您可以使用事件的clientX和cliententy来获取鼠标坐标。例如:

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;
}

首先，要将页面转换为图像，有一个非常酷的库可以做到这一点。它使用画布，并通过读取它来渲染整个页面

从这里获取代码并查看示例。

http://html2canvas.hertzen.com/

一旦你在画布上有了页面，你就可以把它转换成png，并通过选择它来获得它的一部分。

请看这个例子!http://hertzen.com/experiments/jsfeedback/examples/dusky/index.html

点击发送反馈，然后在页面上选择一个区域，然后点击预览!它非常接近你所要求的，但不是做一个红色矩形，你剪掉图像的这一部分。

更多类似于上一个的例子:http://hertzen.com/experiments/jsfeedback/

忘记捕捉浏览器外的任何内容

相关文章：