Question

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

首先，我无法在javascript中找到合适的方式来获取mousedown和mouseup坐标。

我见过jquery的可拖动和可调整大小的div。我想要一些东西，让用户选择必须转换为图像的区域。我甚至可以使用jquery可拖动和可恢复的div来获取Origal鼠标位置，当前鼠标位置和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/

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

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

4 个答案: