使用屏幕上的鼠标坐标抓取图像

Question

我进行了很多搜索，但找不到满足我的要求的任何合适的解决方案。 我希望我的网站中有一个功能，用户可以选择浏览器上的任何区域或桌面上的任何区域，并将所选区域转换为图像。 我知道这可以在窗口形式中完成，您可以选择跟踪鼠标移动并从屏幕捕获图像。 我知道如果我想要在网络中使用此功能，我必须通过 javascript 获取坐标，并且母鸡可能会向网络服务发出 ajax 请求并获取我的图像。

首先，我无法在 javascript 中找到一种正确的方法来获取 mousedown 和 mouseup 坐标。

我见过 jquery 的可拖动和可调整大小的 div。我想要类似的东西，供用户选择必须转换为图像的区域。 我什至可以使用 jquery Dragable 和 reszable div 获取原始鼠标位置、当前鼠标位置和 div 的大小。

其次，我想要一些关于如何抓取所选区域作为图像的建议。

请帮助我。

Answer 1

JavaScript 不可能。网页（故意的！）无法跟踪浏览器窗口外的鼠标移动，也无法读取用户桌面上的图像。

Answer 2

您的意思是类似于： http://www.screenr.com/record ？

Answer 3

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

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

Answer 4

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

获取代码并查看此处的示例。

http://html2canvas.hertzen.com/

将页面放入画布后，您可以将其转换为 png并通过选择它来获取它的一部分。

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

点击发送反馈，然后在页面上选择一个区域，然后点击预览！它非常接近您的要求，但您可以剪切图像的这一部分，制作一个红色矩形。

更多类似最后一个的例子： http://hertzen.com/experiments/jsfeedback/

忘记捕获浏览器之外的任何内容。