-2

does anyone know how websites like jam.dev achieve their click and drag screenshotting functionality?

I am trying to create a tool which involves screenshotting on the client side and my preferred way was to implement it in a similar fashion. Is anyone kind enough to point me in the right direction?

Some things I have tried and researched, but these don't provide the exact results I want:

  • html2canvas and other libraries that use svg and foreign object - these just don't produce consistent results.
  • rendering server side with puppeteer - it would be much better if the screenshotting could be achieved client side.
  • using webRTC - asking for permission and having the user select a screen/window is just not very intuitive.

Any insight would be greatly appreciated!

Justas Galminas
  • 9
  • 2
  • 1
    @KonradLinkowski I don't believe the OP wants to make a chrome extension, just a webpage. – code Aug 30 '22 at 17:04
  • https://stackoverflow.com/questions/4912092/using-html5-canvas-javascript-to-take-in-browser-screenshots/6678156#6678156 – code Aug 30 '22 at 17:12

1 Answers1

0

Browsers share api for extensions that allows making a screenshot

Accoding to this answwer

chrome.tabs.captureVisibleTab(null, {}, function (image) {
   // You can add that image HTML5 canvas, or Element.
});
Konrad
  • 21,590
  • 4
  • 28
  • 64
  • 1
    Exactly what I am looking for, the whole time I've been looking I never thought to include chrome extension in the search.. Thank you! – Justas Galminas Aug 30 '22 at 17:15