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

This commit is contained in:
2023-03-20 09:27:47 +08:00
parent 5df7f54bed
commit 85ef261c51
7 changed files with 194 additions and 19 deletions

View File

@ -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(() => {

View File

@ -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"

View File

@ -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} />;
};