Very cool!! Nice job on this. One thing I was just imagining was an optional “high quality” mode where it screenshots the page using getDisplayMedia, which will be more accurate (e.g. iframes, modern CSS, etc.), but has the downside that it requires a browser permission popup:

async function captureScreenshot() {
  try {
    // Request screen capture permission if not already granted
    const stream = await navigator.mediaDevices.getDisplayMedia({ preferCurrentTab: true });
    
    // Create a video element to capture the stream
    const video = document.createElement('video');
    video.srcObject = stream;
    await video.play();

    // Create a canvas to draw the video frame
    const canvas = document.createElement('canvas');
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;

    // Draw the current video frame to the canvas
    canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);

    // Stop all tracks in the stream
    stream.getTracks().forEach(track => track.stop());

    // Convert the canvas to a data URL (PNG format)
    return canvas.toDataURL('image/png');
  } catch (error) {
    console.error('Error capturing screenshot:', error);
    return null;
  }
}

https://perchance.org/getdisplaymedia-screenshot-example

If the mode is set to high quality, and the user denies the permission (or their device doesn’t support it - e.g. mobile devices don’t currently support getDisplayMedia), then it could fall back to the normal approach.

In any case, well done with this plugin!

Cool…? I guess you should add a link to this post so people can just go look at it, instead of just look at an image ;p Also, “screenshot-plugin” seems to not actually exist so the instructions in the image will not work.

Have you renamed it to “simple-screenshot-plugin” perhaps? https://perchance.org/simple-screenshot-plugin

Could I make some suggestions for changes to how this works? I could make my own, but since you’ve put the effort into making this in the first place I don’t want to derail that if I can help it.

Allow passing a full query selector / element reference to the function.

Have functions to call to just render the canvas and get that canvas. Another to render and get a data url. Another to render and download.

And possibly one to download a data url image, and another to download a canvas image.

Doesn’t need any more coding really, just moving some code around. And makes what you could use the plugin for waaaaay more versatile.