クリップボードに画像をコピーする

画像をクリップボードにコピーする方法を解説します。
スクリーンショットの共有機能などで役立ちます。

前提条件

プラグインのインストール

clipboard-manager プラグインと、画像ファイルの読み込みに使用する fs プラグインが必要です。

npm run tauri add clipboard-manager
npm run tauri add fs

Permissions (権限) の設定

src-tauri/capabilities/default.json に以下の権限を追加します。

{
    "permissions": [
        "clipboard-manager:default",
        "clipboard-manager:allow-write-image",
        ...,
        "fs:default" 
    ]
}

(※ fs:default はサンプルコードでファイル読み込みを行うために追加しています)

1. フロントエンドから作成する (TypeScript)

@tauri-apps/plugin-clipboard-manager の writeImage(image) 関数を使用します。引数の image は tauri-apps/api/image の Image オブジェクトである必要があります。

1. 画像ファイル（Uint8Array）からコピーする例

バイナリデータを Image.fromBytes() で変換してコピーします。

import { writeImage } from '@tauri-apps/plugin-clipboard-manager';
import { Image } from '@tauri-apps/api/image';
import { readFile } from '@tauri-apps/plugin-fs';

async function copyImageFile(filePath: string) {
  try {
    // 1. ファイルをバイナリとして読み込み
    // (事前に @tauri-apps/plugin-fs のセットアップが必要です)
    const buffer = await readFile(filePath);
    
    // 2. Image オブジェクトを作成
    const image = await Image.fromBytes(buffer);

    // 3. クリップボードへ書き込み
    await writeImage(image);
    
    console.log('画像をコピーしました');
  } catch (error) {
    console.error('画像のコピーに失敗しました', error);
  }
}

※ @tauri-apps/api/image は Tauri v2 コア API を使用します。

2. バックエンドから作成する (Rust)

Rust 側でも tauri::image::Image と tauri_plugin_clipboard_manager::ClipboardExt を使用して画像をコピーできます。

依存関係の確認 (Rust)

tauri の features に image が必要になる場合がありますが、標準で含まれていることが多いです。

Rust 実装

ローカルの画像ファイルを読み込んでクリップボードにセットする例です。

use tauri::command;
use tauri_plugin_clipboard_manager::ClipboardExt;
use tauri::image::Image;
use std::fs;

#[command]
fn copy_image_from_rust(app: tauri::AppHandle, file_path: String) -> Result<(), String> {
    // ファイルからバイト列を読み込み
    let bytes = fs::read(&file_path).map_err(|e| e.to_string())?;
    
    // Tauri の Image オブジェクトに変換
    let image = Image::from_bytes(&bytes).map_err(|e| e.to_string())?;
    
    // クリップボードに書き込み
    app.clipboard().write_image(&image).map_err(|e| e.to_string())?;
    
    Ok(())
}

#[cfg_attr(mobile, tauri::mobile_entry_point)]
pub fn run() {
    tauri::Builder::default()
        .plugin(tauri_plugin_clipboard_manager::init())
        .invoke_handler(tauri::generate_handler![copy_image_from_rust])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

フロントエンドからの呼び出し

import { invoke } from '@tauri-apps/api/core';

invoke('copy_image_from_rust', { filePath: '/path/to/image.png' })
  .then(() => console.log('Image copied from Rust!'))
  .catch(console.error);