Lib.rs

› Command line utilities
#web #snapshot #wasm

bin+lib websnap

WebSnap is a command-line tool for capturing screenshots of websites

by canmi21

1 unstable release

Uses new Rust 2024

new 0.1.0 Apr 22, 2025

#1048 in Command line utilities

MIT license

16KB
164 lines

WebSnap

WebSnap is a command-line tool for capturing screenshots of websites. It provides two implementations: a Rust-based version that uses Google Chrome in headless mode to capture screenshots, and a WebAssembly (WASM) version that serves as a placeholder for browser-based screenshot functionality. The tool allows customization of screenshot dimensions, user-agent strings, output formats, and more.

Features

  • Capture website screenshots with customizable width, height, and user-agent.
  • Support for output formats: WebP, PNG, JPG.
  • Debug mode for detailed logging.
  • Command-line interface with flexible arguments.
  • WASM integration for potential browser-based usage (placeholder implementation).
  • Sleep time configuration to handle dynamic content loading.

Prerequisites

  • Rust Implementation:
    • Rust toolchain (cargo, rustc).
    • Google Chrome (stable version) installed.
    • Dependencies: clap, chrono, serde, md5.
  • WASM Implementation:
    • wasm-pack for building WebAssembly.
    • Node.js and npm for JavaScript integration.
    • A modern browser for testing WASM.

Installation

Rust Version

  1. Clone the repository: 
    git clone https://github.com/canmi21/websnap.git
cd websnap
  2. Install dependencies and build: 
    cargo build --release
  3. The binary will be available at target/release/websnap.

WASM Version

  1. Install wasm-pack: 
    cargo install wasm-pack
  2. Build the WASM module: 
    wasm-pack build --target web
  3. This generates a pkg directory with the WASM module and JavaScript glue code.

Usage

Rust Version

Run the tool with the following command:

websnap --target <URL> [OPTIONS]

Options

  • -o, --output <FILE>: Output file or path for the screenshot.
  • -d, --debug: Enable debug output.
  • -h, --height <PIXELS>: Screenshot height (default: 1080).
  • -w, --width <PIXELS>: Screenshot width (default: 1920).
  • -s, --sleep <SECONDS>: Sleep time before capturing (default: 0).
  • -u, --ua <STRING>: Custom User-Agent string.
  • -t, --target <URL>: Target URL to capture (e.g., https://example.com).
  • -f, --format <FORMAT>: Output format (png, webp, jpg).
  • --help: Print help information.

Example

Capture a screenshot of https://example.com with a custom size and output format:

websnap -t https://example.com -o screenshot.png -w 1280 -h 720 -f png -d

WASM Version

The WASM version is a placeholder and logs parameters to the console. To integrate it into a web project:

  1. Create an HTML file (e.g., index.html): 
    <!DOCTYPE html>
<html>
<head>
    <title>WebSnap WASM</title>
</head>
<body>
    <script type="module">
        import init, { capture_screenshot } from './pkg/websnap.js';

        async function run() {
            await init();
            capture_screenshot(
                "https://example.com",
                "screenshot.png",
                1920,
                1080,
                "Mozilla/5.0",
                2,
                true
            );
        }

        run();
    </script>
</body>
</html>
  2. Copy the pkg directory to your web project.
  3. Serve the project using a local server (e.g., npx serve).
  4. Open the browser console to see the logged output.

Note: The WASM version requires a JavaScript-based screenshot implementation (e.g., using Puppeteer or canvas) to be fully functional.

Compilation and Packaging

Rust Compilation

  • Build the Rust binary: 
    cargo build --release
  • Run tests (if any): 
    cargo test
  • Package the binary for distribution: 
    cargo package

WASM Compilation

  • Build the WASM module: 
    wasm-pack build --target web
  • Test the WASM module in a browser: 
    npx serve
  • Package for npm: 
    wasm-pack pack

npm Integration

To publish the WASM module to npm:

  1. Update the pkg/package.json with your project details (e.g., name, version).
  2. Publish to npm: 
    cd pkg
npm publish
  3. Install in a JavaScript project: 
    npm install websnap
  4. Import and use in your JavaScript code as shown in the WASM usage example.

Project Structure

websnap/
├── src/
│   ├── main.rs          # Rust CLI implementation
│   └── lib.rs           # WASM implementation
├── Cargo.toml           # Rust dependencies and metadata
├── README.md            # This file
└── pkg/                 # WASM output (after wasm-pack build)

Limitations

  • The Rust version requires Google Chrome to be installed and only works on systems supporting Chrome's headless mode.
  • The WASM version is a placeholder and does not capture screenshots; it requires a JavaScript-based implementation for full functionality.
  • No support for capturing dynamic content requiring user interaction.

Contributing

Contributions are welcome! Please open an issue or submit a pull request on GitHub.

License

MIT License. See LICENSE for details.

Dependencies

~14MB
~233K SLoC