Pass the coordinates directly? about selfie HOT 11 CLOSED

I think the easiest way would be to take the whole-page screenshot and then in your script calculate the bounding client rectangle like you said and use canvas to crop the screenshot to that. Alternatively, you could fork this repository and just offset the markers (see body::before and body::after in index.css). For this you still need to find the relative position of the element though - or you could change the CSS to draw the markers around your element and not the body.

Are you looking at this repository because you're interested in a fully client-side solution? Just in case this is workable for you, take a look at Playwright, it would be really easy to write a Playwright script to screenshot a DOM node for any sort of further checking or processing if you can use that.

Alternatively, if you are going to write a Chrome extension anyway, you could use the Chrome extension API. This article describes how to make a Chrome extension which works basically the same way as this script: it gets a stream of the page's recording and grabs a frame from it to use as a screenshot:

https://blog.shahednasser.com/how-to-take-screenshots-in-chrome-extension/

from selfie.

take a look at Playwright

I'm not choosing the framework -- I already use the https://github.com/rubycdp/ferrum -- but it has viewport bugs so their screenshoting captures some invalid region. Then I tried the html2canvas

browser.evaluate_async "html2canvas(document.querySelector('#page_wall_posts')).then(function(canvas){ __f(canvas.toDataURL()) })"

but everything was looking wrong on the image and then I realised they kinda reinvent the rendering engine, lol. Then I saw this comment niklasvh/html2canvas#2509 (comment)

if you are going to write a Chrome extension

Not sure about that. I'm working on an urgent project where the screencapturing is just one of the desired features. I'm looking for the simplest solution and to solve the policy issue I hope to find already existing extension like I already did to allow the js asset injecting to inject the html2canvas in my current experiments.

The API I want has to be just coordinates or a DOM selector.

and use canvas to crop the screenshot to that

This would work for me too, I agree. Now how do I get a full page screenshot? I wish this project had some more ready-to-use JS snippets I could copypaste into browser console to play around.

from selfie.

And thank you for the quick response, btw!

from selfie.

Also about the demo page.
When I chose the current tab

Chrome shows some bar at the top with a button but it lasts just a second and I can't even read the text on it so fast -- probably I have to press there to allow something. But after a second you page decides something is broken.

Maybe because the chrome bar moves the bottom pixel out of the screen? I don't know, just guessing.

from selfie.

Are you able to automate selecting stuff in and confirming this dialog for screens sharing with Ferrum? If you want to use my script for automating your screenshot taking via client-side scripting, you will need to find a way to automate this dialog. Ferrum seems to be a Chrome DevTools Protocol (CDP) wrapper like say Puppeteer and the advantage there is that they give you the ability to get the screenshot without any user-interactivity. This script cannot do that due to the browser security model requiring explicit user permission via the interaction with this dialog.

Also this script is quite old and was never that reliable. You are probably right that the modal covers the pixel marker. I don't use Chrome so I haven't looked at whether this works there for a long time. The delay you are seeing is coming from this:

You could fork the repository and increase the interval to see if it helps.

Maybe something I could recommend is use Ferrum to add markers around your desired DOM element like is done via index.css in this repository, take the picture of the whole viewport and then use https://github.com/TomasHubelbauer/selfie/blob/main/scan.js to find the crop coordinates and do the crop with canvas. It it possible that this could work nicely for you but I don't think my script will save you time when it comes to the actual screenshot capture because it is mostly a giant hack, nothing to rely on.

from selfie.

they give you the ability to get the screenshot without any user-interactivity

If only ferrum had no viewport bugs.

explicit user permission via the interaction with this dialog

I believe this WICG/proposals#32 (comment) solves it, I'm yet to know if my Chrome is updated enough.

Let's think of my problem being split in half and I now just need at least a full page screenshot to start with. Need some full snippet to obtain the canvas with the image drawn on it. I'm unfortunately not a JS specialist so even that "import snap" line from README is a hack for me, I just copypaste.

from selfie.

I remember this flag definitely not being supported yet when I was initially working on it, but it is possible it is there now and if so, that would be great because I assume then it allows you to take the screenshot completely non-interactively. Unfortunately I can't help beyond this, but I would for sure recommend filing an issue or opening a fix PR with Ferrum, because something so basic as taking the full page screenshot should work. I know this won't solve your immediate issue if you're on a deadline, but at least it would help future programmers looking to solve a similar issue.

from selfie.

window.setTimeout(resolve, 1000)

This could be a parameter in your utility. It depends on how user is solving the permission issue and maybe one isn't able to make the pixels visible in time.

from selfie.

Unfortunately ferrum guys just don't seem to have time to figure out how to properly fix and test viewport issues: rubycdp/ferrum#203 (comment)
That's why I looked for alternative JS-based/automation-agnostic solutions.

from selfie.

This timeout doesn't start when the dialog to select the tab appears. It starts when the dialog is submitted, but Chrome has (used to have?) an animation that would take some time to hide the dialog. It wasn't one second long, but I also found that in Chrome, the screen recording would start with a fraction of a second where the colors were completely off and they would only stabilize later in the video. I added this extra second for Chrome to be able to get its shit together because after one second both the dialog should definitely be gone and the colors in the encoded video should have definitely stabilized. In reality, it is overly generous.

I just tried in Firefox and it couldn't find the markers either with my up to date Firefox installation. The problem is the markers' colors get washed out by the video compression so I had to build a table mapping the expected color to the real color as it ends up being ruined by the video compression. The codecs used for screen recording in various browsers change and so do their settings from release to release. Firefox used to relatively accurately preserve the marker colors, but now it seems to desaturate them a lot. This breaks the marker detection and I am pretty sure the same is true in Chrome hence the error message you are seeing on your end.

from selfie.

In that case I am afraid you're going to need to try to fix this yourself in Ferrum and use your own fork for the tests if they don't accept the contribution back. I would like to help you, but this script I made was plagued by reliability issues already when I made it and using it for reliability tests would only amplify the trouble it would give you. I am afraid it would cause you more time to troubleshoot the issues across browser updates etc. than it would save you.

from selfie.