This plugin provides an easy to use rust and javascript APIs for capturing snapshots of the webview window.

This repo shape might appear to be strange, but it is really just a hybrid Rust / Typescript project that recommends a specific type of consumption, namely using GIT as the secure distribution mechanism, and referencing specific unforgeable git hashes. Of course, it can also be consumed via Cargo and NPM.

Rust source code that implements the webview capturing behavior.

Typescript source for the /webview-dist folder that provides an API to interface with the rust code.

Tree-shakeable transpiled JS to be consumed in a Tauri application.

There are three general methods of installation that we can recommend.

1. Pull sources directly from Github using git tags / revision hashes (most secure, good for development, shown below)
2. Git submodule install this repo in your tauri project and then use file protocol to ingest the source
3. Use crates.io and npm (easiest, and requires you to trust that our publishing pipeline worked)

For more details and usage, see example app.

Please note, below in the dependencies you can also lock to a revision/tag in both the Cargo.toml and package.json

src-tauri/Cargo.toml

[dependencies.tauri-plugin-snapshot]
git = "https://github.com/Fractal-Tess/tauri-plugin-snapshot"
# tag = "v0.1.0" Not available yet

Use in src-tauri/src/main.rs:

fn main() {
    tauri::Builder::default()
        .plugin(tauri_plugin_snapshot::init()) <-
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

Install from a tagged release

This is not available yet

npm install github:/Fractal-Tess/tauri-plugin-snapshot#v0.1.0

Install from a commit

npm install github:Fractal-Tess/tauri-plugin-snapshot#a62b3804ba9cf678c08099789ea32fa4ba467ac4

Install from a branch (dev)

npm install github:Fractal-Tess/tauri-plugin-snapshot#dev

package.json

  "dependencies": {
    "tauri-plugin-snapshot-api": " github:Fractal-Tess/tauri-plugin-snapshot",
    ...
  }

import { snapshotViewport, snapshotDocument } from 'tauri-plugin-snapshot-api';

// Capture the content in the current viewport (only works on linux)
const pngImageBuffer = await snapshotViewport();

// Capture the content of the entire DOM
const pngImageBuffer = await snapshotDocument();

// You may also choose to pass in options for capturing transparency and highlighted nodes (only works on linux)
const pngImageBuffer = await snapshotViewport({
  capture: {
    highlighted: true,
    transparentBackground: true,
  },
});

// You can also tell the plugin to write the png to disk like so:
import { pictureDir } from '@tauri-apps/api/path';
const pngImageBuffer = await snapshotViewport({
  save: {
    path: (await pictureDir()) + 'snapshot.png', //Save path
    overwrite: true, // Whether or not to overwrite the image if it already exists
  },
});

In rust code, you can call the snapshot function the plugin exports to get this functionality.

use tauri_plugin_snapshot::{snapshot, Options, Region};

// For example in a command
#[tauri::command]
fn example_command(window: tauri::Window) -> Result<(), String> {
    let options = Options {
        capture: None,
        region: Some(Region::Viewport),
        save: None,
    };

    let img_buffer = snapshot(window, options).map_err(|error| error.to_string())?;

    // Do stuff with the image buffer

    Ok(())
}

// Or in setup
fn main() {
    tauri::Builder::default()
        .plugin(tauri_plugin_snapshot::init())
        .invoke_handler(tauri::generate_handler![example_command])
        .setup(|app_handle| {
            let window_handle = app_handle.get_window("main").unwrap();

            let options = Options {
                capture: None,
                region: Some(Region::Viewport),
                save: None,
            };

            let img_buffer = snapshot(window_handle, options)?;
            // Do stuff with the image buffer

            Ok(())
        })
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

// Or wherever you like, as long as you have a window handle

MIT