【Rust+Tauri】フロントエンドへの画像送信高速化

$ npm create tauri-app@latest tauri-custom-protocol
Need to install the following packages:
  create-tauri-app@3.13.17
Ok to proceed? (y) y
✔ Choose which language to use for your frontend · TypeScript / JavaScript - (pnpm, yarn, npm, bun)
✔ Choose your package manager · npm
✔ Choose your UI template · React - (https://react.dev/)
✔ Choose your UI flavor · TypeScript

Template created! To get started run:
  cd tauri-custom-protocol
  npm install
  npm run tauri dev

...
[dependencies]
tauri = { version = "1", features = [ "fs-all"] }
serde = { version = "1", features = ["derive"] }
serde_json = "1"
image = "0.23.14"  <-- 追加
...

// Prevents additional console window on Windows in release, DO NOT REMOVE!!
#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]

use image::io::Reader as ImageReader;
use tauri::http::ResponseBuilder;

fn main() {
    tauri::Builder::default()
        // custom protocol
        .register_uri_scheme_protocol("reqimg", move |_app, _request| {
            // read the png image file
            let image = ImageReader::open("icons/Square310x310Logo.png")
                .unwrap()
                .decode()
                .unwrap()
                .into_bytes();

            ResponseBuilder::new()
                .mimetype("arrayBuffer")
                .status(200)
                .header("Access-Control-Allow-Origin", "*")
                .body(image)
        })
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

import { useRef } from "react";
import "./App.css";

const App = () => {
  const canvasRef = useRef(null);

  const handleClick = async () => {
    const request = new Request("reqimg://test", {
      method: "GET",
      headers: {},
    });
    const response = await fetch(request).catch((reason) => {
      throw reason;
    });
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    if (response.body === null) {
      throw new Error("Response body is null");
    }

    // Read the response as arrayBuffer
    const arrayBuffer = await response.arrayBuffer();
    const buffer = new Uint8ClampedArray(arrayBuffer);

    if (!canvasRef.current) {
      throw new Error("Canvas element not found");
    }

    if (buffer.length !== 310 * 310 * 4) {
      throw new Error(`Invalid buffer length: ${buffer.length}`);
    }

    const ctx = canvasRef.current?.getContext("2d");
    if (ctx) {
      console.log("Drawing image");
      const img = new ImageData(buffer, 310, 310);
      ctx.putImageData(img, 0, 0);
    }
  };

  return (
    
      Open URL
      
    
  );
};

export default App;

const request = new Request("reqimg://test", {
  method: "GET",
  headers: {},
});

$ nom run tauri dev