DEV Community

Snapshot Site
Snapshot Site

Posted on

Customize Screenshot

Customize Screenshot

Capturing web pages isn't always about saving what's visible — sometimes, it's about controlling what appears before the screenshot is taken.

With Snapshot Site, you can inject custom JavaScript and hide specific elements before the screenshot is captured. This gives you full control for:

  • Removing ads, popups, or cookie banners
  • Highlighting sections or modifying styles
  • Ensuring clean visuals for documentation or reports

✨ Why Customize Before Capturing?

Injecting JS or hiding elements helps when you want to:

  • 🎯 Focus attention on specific content
  • 🧹 Remove distractions (ads, modals, banners)
  • 📱 Simulate UI states (logged in vs logged out)
  • 🔍 Test visual changes before deployment

🧪 Real Example – Screenshot Wikipedia with Style Tweaks

Here’s how to use Java + AsyncHttpClient to call Snapshot Site's API, inject custom styles, and hide specific language boxes on Wikipedia:


java
import org.asynchttpclient.*;

public class ScreenshotExample {
    public static void main(String[] args) throws Exception {
        AsyncHttpClient client = new DefaultAsyncHttpClient();

        client.prepare("POST", "https://screenshot-snapshot-site2.p.rapidapi.com/api/v2/screenshot")
            .setHeader("x-rapidapi-key", "YOUR_API_KEY")
            .setHeader("x-rapidapi-host", "screenshot-snapshot-site2.p.rapidapi.com")
            .setHeader("Content-Type", "application/json")
            .setHeader("Accept", "application/json")
            .setBody("""
            {
              "url": "https://wikipedia.org",
              "format": "png",
              "width": 1280,
              "height": 720,
              "delay": 0,
              "fullSize": false,
              "hideCookie": false,
              "javascriptCode": "document.body.style.color = '#fd7e14'; var elements = document.querySelectorAll('a'); [].slice.call(elements).forEach(function(elem) { elem.style.color = '#fd7e14'; });",
              "hide": "#js-link-box-en, #js-link-box-fr"
            }
            """)
            .execute()
            .toCompletableFuture()
            .thenAccept(System.out::println)
            .join();

        client.close();
    }
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)