I have developed a chrome extension which takes screenshots of webpages. I have noticed that when I take screenshots of some pages, the mouse in the screenshot disappears. Therefore I am not able to know which place did the click occur later.
How could this be resolved ?
You would need to draw a mouse cursor yourself. Here is an example of making screenshot on mouse click and drawing red circle where the cursor was:
content_script.js:
window.addEventListener("click", function(event) {
chrome.extension.sendRequest({x: event.x, y: event.y});
});
background.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>
On windows, the PrntScrn function doesn't capture the mouse as part of the snapshopt, and there doesn't seem to be any way to get Windows to include it.
External apps that do screenshots can/will capture the mouse. IrFanView is one.
but this won't work since you're working on a browser plugin. You may have to use some code to detect mouse position and manually insert the mouse image at that location into the captured image.
