Taking screenshots in-browser (or 'client-side') is all about tradeoffs - there's no perfect solution for every situation. Let's take a look at three different ways you can take screenshots, and then how you can use them by sending them to a server or letting the user download the image. Screenshots can be a very valuable and important part of your JavaScript application. Companies like Google use them for from users, products like use screenshots as a core part of their product and they're great for generating data exports (like charts). getting feedback BugHerd Asking users to take a screenshot of what they're looking at introduces a lot of friction. First, they need to know the keyboard shortcut (which is different from macOS to Windows). Then they need to know what to do with it. For example, they could upload it to somewhere like Dropbox or email it to you. Most users probably won't know how to resize or optimize the quality of the screenshot either. If you're hosting the screenshots yourself, you want to make sure they take up as little space as possible, which in turn ensures you spend as little as possible. Here are three ways you can automatically capture screenshots for your users: 1. Using html2canvas for client-side screenshots Niklas von Hertzen answered a StackOverflow question in saying it's possible to put the DOM of the page into an HTML canvas and use it to generate a screenshot. After he made the code public, he updated his answer with the original idea that is . Later investigation revealed Google uses a to automatically generate screenshots of users providing feedback, proving the implementation scales, and is robust enough for large products. 2011 html2canvas very similar technique How to use html2canvas The idea is pretty simple - you capture the DOM (HTML of the page) when you want to generate a screenshot, and you pass that DOM into an HTML canvas. Under certain restrictions, the canvas element can generate a data URI of the contents inside (as a base64 string). The example below generates a screenshot and opens it in the window as an image. screenshotTarget = .body;

html2canvas(screenshotTarget).then( { base64image = canvas.toDataURL( ); .location.href = base64image;
}); const document ( ) => canvas const "image/png" window Pros/Cons of the canvas method Pros Quick - you don't need to wait on any external services, this is all done on the clientRegularly updated - while html2cavnas isn't updated daily, it regularly sees updates and fixes every few monthsVery popular - the community is strong and active, there are over 40 pull requests open and 600 issues logged (as of July 2020). There are regular questions (and answers!) on Stack Overflow too.Good browser support - html2canvas is over 9 years old, and still maintains . great browser support Cons Doesn't support Shadow DOM or Web Components - there's a to add support, and it looks like the maintainers are keen to get it merged.Cross-Origin restrictions - when you add elements that contain requests to the canvas (like images, stylesheets etc), they're subject to the same CORs policies that normal requests are. pull request open Doesn't support every CSS property - properties are manually added and configured, so 100% coverage is difficult. The documentation states "html2canvas will never have full CSS support".Fragile to updates - html2canvas can be fragile to browser updates, occasionally breaking existing functionality. 2. Generate screenshots with getDisplayMedia Around the same time that html2canvas got released, the idea that the web could support native video calling was getting a lot of traction. In 2011, Google released Hangouts, a realtime video and audio platform. To support Hangouts, Google put forward the idea (and some implementation) of Real-Time Communication (RTC) which was later developed into WebRTC. WebRTC has since become a standard in all modern browsers, and it's the infrastructure that provides the web with real-time video, audio, and data communication. A part of WebRTC is - which is used as the screen sharing API. You can capture a still image from a video, like screen sharing, which essentially becomes a screenshot. Let's look at a basic example: getDisplayMedia capture = () => { canvas = .createElement( ); context = canvas.getContext( ); video = .createElement( ); { captureStream = navigator.mediaDevices.getDisplayMedia();
    video.srcObject = captureStream;
    context.drawImage(video, , , .width, .height); frame = canvas.toDataURL( );
    captureStream.getTracks().forEach( track.stop()); .location.href = frame;
  } (err) { .error( + err);
  }
};

capture(); const async const document "canvas" const "2d" const document "video" try const await 0 0 window window const "image/png" => track window catch console "Error: " Even though the above example isn't as small as the first, it's still relatively easy to follow what's happening. Firstly, canvas and video elements are created in memory, then the API is used to request access to either the user's desktop or tab. After the user grants permission, the screen stream is set to the video element and drawn to the canvas. An image is extracted from the canvas using the same method as described in the html2canvas example above. getDisplayMedia Pros/Cons of the getDisplayMedia API Pros Good modern browser support - it's a native API, which means it comes built-in to modern browsers, there's no need for any third party script or code. - you can easily add support for video recording in the future, using the same APIPixel perfect - it's exactly what the user is seeing Extensible - the getDisplayMedia API can record either the desktop or a browser window - making it great for taking a screenshot of something other than your application. Desktop or Tab Cons - you need to get permissions from the user to record. Depending on the browser, the permissions dialogue can look different and can sometimes be confusing. Permissions - because you need to get permission, it can take the user a while to click accept and understand what is happening. If the user needs a screenshot instantly, this little UI interaction cold delay capturing some time-sensitive content. Slow 3. Screenshots as a Service Screenshot services are growing in popularity as they offer an easy way to integrate screenshots into your existing application. While it's not client-side, using a screenshot service like , or means you don't need to manage any infrastructure that takes the screenshots. url2png Stillio Urlbox While implementation can differ per service, the general idea is the same. You send the URL (and customizable parameters like dimensions, format and quality) to an external service and either wait for a response, or listen for the response elsewhere. This is usually handled with a backend service, so let's take a look using url2png and NodeJS and express: url2png = ( )( , ); fs = ( );

app.get( , (req, res) => {
	url2png.readURL(req.query.url, {}).pipe(fs.createWriteStream( ));
	res.json({ : })
}); const require 'url2png' 'API_KEY' 'PRIVATE_KEY' const require 'fs' '/screenshot' 'screenshot.png' success true The above example takes a request like and then uses the url2png library to generate a screenshot. That screenshot is then saved to the local filesystem - or you can . /screenshot?url=http://google.com.au return it in the request Pros/Cons of using a screenshot service Pros - services can handle post processing too, offering the flexibility to generate images in different file types, sizes, quality and more. Post processing - the services are used by many people and facilitate large volumes of requests.Infrastructure - you don't need to maintain the infrastructure to manage the process of taking a screenshot. If you're happy to, projects like and services like are a good place to start. Robust APIs PhantomJS SauceLabs Cons - the screenshot might not be what the user sees. For example, if the user has interacted with the page, or if they're authenticated, the screenshot service won't be able to render the same page for a screenshot. Not stateful - out of the three options, this is the only one that comes with a cost. Although it's quite cheap, if you're handling large volumes of screenshots, it could be expensive. Cost - screenshot services can take multiple minutes to generate and return an image. Time Roundup Whether you're integrating screenshots to get feedback or for a critical feature in your application, you need to weigh up the pros and cons of each solution. Using a client-side solution, like html2canvas or the getDisplayMedia API means you don't have to manage any server infrastructure and generally the images are generated pretty quickly. If you need a representation of what your user is looking at and don't mind the sometimes obtuse permissions popup, the is a good place to start. pixel-perfect getDisplayMedia API If you want to take screenshots with no external service dependency, could be the right choice for you. semi-accurate quickly html2canvas Finally, if you're okay with the technical implementation and the associated with it, a might be the best option. outsourcing cost screenshot service

Community Is

How To Take Screenshots In The Browser Using JavaScript

Too Long; Didn't Read

Companies Mentioned

James

Share Your Thoughts

About Author

TOPICS

Languages

THIS ARTICLE WAS FEATURED IN...