0

我开发了一个 chrome 扩展程序，可以截取网页截图。我注意到当我对某些页面进行截图时，截图中的鼠标消失了。因此，我无法知道稍后点击发生在哪个位置。

这怎么可能解决？

4

2 回答 2

4

您需要自己绘制鼠标光标。这是一个在鼠标单击并在光标所在位置绘制红色圆圈的示例：

content_script.js：

window.addEventListener("click", function(event) {
    chrome.extension.sendRequest({x: event.x, y: event.y});
});

背景.html：

<html>
<head>
<script>
chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
    chrome.tabs.captureVisibleTab(null, {format:"png"}, function(dataUrl){

        var img = new Image();
        img.onload = function(){
            var canvas = document.getElementById("canvas");
            canvas.width = img.width;
            canvas.height = img.height;

            var ctx = canvas.getContext("2d");

            ctx.drawImage(img, 0, 0);
            ctx.arc(request.x, request.y, 5, 0, Math.PI*2, true);
            ctx.fillStyle = "rgb(255,0,0)";
            ctx.fill();

            chrome.tabs.create({url: canvas.toDataURL("image/png")});
        };
        img.src = dataUrl;

    });
    sendResponse({});
});
</script>
</head>
<body>
    <canvas id="canvas"></canvas>
</body>
</html>
于 2011-07-16T00:50:08.627 回答
1

在 Windows 上，PrntScrn 函数不会将鼠标捕获为 snapshopt 的一部分，并且似乎没有任何方法可以让 Windows 包含它。

执行屏幕截图的外部应用程序可以/将捕获鼠标。IrFanView就是其中之一。

但这不起作用，因为您正在使用浏览器插件。您可能必须使用一些代码来检测鼠标位置并将该位置的鼠标图像手动插入到捕获的图像中。

于 2011-07-15T21:07:56.637 回答