pref: 截图改用自定义协议传递。
This commit is contained in:
@ -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(() => {
|
||||
|
@ -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"
|
@ -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} />;
|
||||
};
|
||||
|
Reference in New Issue
Block a user