pref: 截图改用自定义协议传递。

src/App.tsx

@@ -1,8 +1,9 @@
 import { createEffect } from 'solid-js';
-import { invoke } from '@tauri-apps/api/tauri';
-import { DisplayView } from './components/\u0016display-view';
+import { convertFileSrc, invoke } from '@tauri-apps/api/tauri';
+import { DisplayView } from './components/display-view';
 import { DisplayListContainer } from './components/display-list-container';
 import { displayStore, setDisplayStore } from './stores/display.store';
+import { path } from '@tauri-apps/api';
 
 function App() {
   createEffect(() => {

src/components/display-view.tsx

@@ -9,15 +9,21 @@ type DisplayViewProps = {
 };
 
 export const DisplayView: Component<DisplayViewProps> = (props) => {
+  const size = createMemo(() => ({
+    width: props.display.width * displayStore.viewScale,
+    height: props.display.height * displayStore.viewScale,
+  }));
   const style = createMemo(() => ({
-    width: `${props.display.width * displayStore.viewScale}px`,
-    height: `${props.display.height * displayStore.viewScale}px`,
     top: `${props.display.y * displayStore.viewScale}px`,
     left: `${props.display.x * displayStore.viewScale}px`,
   }));
   return (
     <section class="absolute bg-gray-300" style={style()}>
-      <ScreenView displayId={props.display.id} />
+      <ScreenView
+        displayId={props.display.id}
+        height={size().height}
+        width={size().width}
+      />
       <DisplayInfoPanel
         display={props.display}
         class="absolute bg-slate-50/10 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded backdrop-blur w-1/3 min-w-[300px] text-black"

src/components/screen-view.tsx

@@ -1,17 +1,21 @@
 import { invoke } from '@tauri-apps/api';
 import { listen } from '@tauri-apps/api/event';
+import { convertFileSrc } from '@tauri-apps/api/tauri';
 import {
   Component,
   createEffect,
   createSignal,
   JSX,
   onCleanup,
+  onMount,
   splitProps,
 } from 'solid-js';
 
 type ScreenViewProps = {
   displayId: number;
-} & JSX.HTMLAttributes<HTMLImageElement>;
+  height: number;
+  width: number;
+} & Omit<JSX.HTMLAttributes<HTMLCanvasElement>, 'height' | 'width'>;
 
 async function subscribeScreenshotUpdate(displayId: number) {
   await invoke('subscribe_encoded_screenshot_updated', {
@@ -21,20 +25,48 @@ async function subscribeScreenshotUpdate(displayId: number) {
 
 export const ScreenView: Component<ScreenViewProps> = (props) => {
   const [localProps, rootProps] = splitProps(props, ['displayId']);
-  const [image, setImage] = createSignal<string>();
+  let canvas: HTMLCanvasElement;
+  const [ctx, setCtx] = createSignal<CanvasRenderingContext2D | null>(null);
   createEffect(() => {
-    const unlisten = listen<{ base64_image: string; display_id: number }>(
-      'encoded-screenshot-updated',
-      (event) => {
-        if (event.payload.display_id === localProps.displayId) {
-          setImage(event.payload.base64_image);
-        }
+    const unlisten = listen<{
+      base64_image: string;
+      display_id: number;
+      height: number;
+      width: number;
+    }>('encoded-screenshot-updated', (event) => {
+      if (event.payload.display_id === localProps.displayId) {
+        const url = convertFileSrc(
+          `displays/${localProps.displayId}?width=${canvas.width}&height=${canvas.height}`,
+          'ambient-light',
+        );
+        fetch(url, {
+          mode: 'cors',
+        })
+          .then((res) => res.body?.getReader().read())
+          .then((buffer) => {
+            console.log(buffer?.value?.length);
 
-        console.log(event.payload.display_id, localProps.displayId);
-      },
-    );
+            let _ctx = ctx();
+            if (_ctx && buffer?.value) {
+              _ctx.clearRect(0, 0, canvas.width, canvas.height);
+              const img = new ImageData(
+                new Uint8ClampedArray(buffer.value),
+                canvas.width,
+                canvas.height,
+              );
+              _ctx.putImageData(img, 0, 0);
+            }
+          });
+      }
+
+      // console.log(event.payload.display_id, localProps.displayId);
+    });
     subscribeScreenshotUpdate(localProps.displayId);
 
+    onMount(() => {
+      setCtx(canvas.getContext('2d'));
+    });
+
     onCleanup(() => {
       unlisten.then((unlisten) => {
         unlisten();
@@ -42,5 +74,5 @@ export const ScreenView: Component<ScreenViewProps> = (props) => {
     });
   });
 
-  return <img src={image()} class="object-contain" {...rootProps} />;
+  return <canvas ref={canvas!} class="object-contain" {...rootProps} />;
 };