As the language of the web, it’s no surprise that JavaScript is the most used programming language in the world. So if you’re developing an app, you need to be able to take screenshots with JavaScript.
Fortunately, there are many ways to take JavaScript screenshots. Since there are so many, we’ll deal with the most popular option and give you an alternative for a more efficient way to take programmatic screenshots.
Let’s dive in!
Taking Website Screenshots Using html2canvas
Initially born on StackOverflow in 2011, html2canvas has become one of the most popular methods for taking website screenshots with JavaScript. The library works by capturing a website’s HTML or DOM, as it's also referred to. It then passes the HTML into an HTML canvas and generates a screenshot.
To use the library, you’ll use this code:
With this code, you’ll first assign the webpage's body to a variable and then call the html2canvas function.
Calling this function will generate a screenshot and open it in the browser window as an image.
While this is a workable solution, it does have some limitations. For example, the script's images must reside under the same origin. In other words, they all need to have the same URI scheme, hostname, and port number.
If not, you’ll need to use a proxy to read them.
Another limitation is that this method doesn’t allow for taking bulk screenshots quickly.
Taking Screenshots Using NodeJS, JavaScript, and ScreenshotAPI
To eliminate these limitations, ScreenshotAPI provides a better, more accessible alternative that allows you to take programmatic website screenshots for almost any use case in various file formats, including PDF, JPG, and PNG. It also makes taking bulk screenshots simpler.
To use this method, you’ll first need to install NodeJS. Go to the NodeJS website, download the application, and follow the installation instructions.
Once installed, you can write the script that takes screenshots and saves them to your system.
The first step in writing the script is to import the request and file system modules:
var fs = require('fs')
var request = require('request');
You’ll then assign your API key, the width and the height of the screenshot, the output format, and the website you would like to take a screenshot of to variables:
var token = 'Your API Key';
var url = encodeURIComponent('https://google.com');
var width = 1920;
var height = 1080;
var output = 'image';
Once these variables are assigned, you’ll construct your query parameters and URL:
var query = "https://shot.screenshotapi.net/screenshot";
query += `?token=${token}&url=${url}&width=${width}&height=${height}&output=${output}`;
Finally, you’ll call the API and save the screenshot:
request.get({url: query, encoding: 'binary'}, (err, response, body) =>; {
fs.writeFile('screenshot.png', body, 'binary', err => {
if (err) {
console.log(err);
} else {
console.log("The file was saved!");
}
});
});
Combined, your code to take the screenshot looks like this:
Start Taking Screenshots With JavaScript Now
You don’t have to struggle with the traditional ways to take JavaScript screenshots - not if you use ScreenshotAPI. Write your script once. Then, build on it to take bulk, programmatic, or timed screenshots.
To learn more about ScreenshotAPI and how it simplifies taking programmatic screenshots, get your free API key today!