ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Message: Fix Offscreen Canvas blur error after sending a message

Browse Source
This commit is contained in:
Alexander Zinchuk 2024-09-06 15:43:08 +02:00
parent 2c3b9ce7ad
commit e9c069d356
2 changed files with 17 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/hooks/useOffscreenCanvasBlur.ts
View File

@ -8,29 +8,30 @@ const RADIUS = 7;
let lastWorkerIndex = -1; let lastWorkerIndex = -1;
export default function useOffscreenCanvasBlur( export default function useOffscreenCanvasBlur(
dataUri?: string, thumbData?: string, // data URI or blob URL
isDisabled = false, isDisabled = false,
radius = RADIUS, radius = RADIUS,
) { ) {
// eslint-disable-next-line no-null/no-null // eslint-disable-next-line no-null/no-null
const canvasRef = useRef<HTMLCanvasElement>(null); const canvasRef = useRef<HTMLCanvasElement>(null);
const workerIndex = useMemo(() => cycleRestrict(MAX_WORKERS, ++lastWorkerIndex), []); const workerIndex = useMemo(() => cycleRestrict(MAX_WORKERS, ++lastWorkerIndex), []);
const offscreenRef = useRef<OffscreenCanvas>();
useLayoutEffect(() => { useLayoutEffect(() => {
if (!dataUri || isDisabled) return; if (!thumbData || isDisabled || offscreenRef.current) return;
const canvas = canvasRef.current; const canvas = canvasRef.current;
if (!canvas) return; if (!canvas) return;
const offscreen = canvas.transferControlToOffscreen(); offscreenRef.current = canvas.transferControlToOffscreen();
const { connector } = launchMediaWorkers()[workerIndex]; const { connector } = launchMediaWorkers()[workerIndex];
connector.request({ connector.request({
name: 'blurThumb', name: 'blurThumb',
args: [offscreen, dataUri, radius], args: [offscreenRef.current, thumbData, radius],
transferables: [offscreen], transferables: [offscreenRef.current],
}); });
}, [dataUri, isDisabled, radius, workerIndex]); }, [thumbData, isDisabled, radius, workerIndex]);
return canvasRef; return canvasRef;
} }

12
src/lib/offscreen-canvas/offscreen-canvas.worker.ts
View File

@ -3,8 +3,10 @@ import fastBlur from '../fastBlur';
const FAST_BLUR_ITERATIONS = 2; const FAST_BLUR_ITERATIONS = 2;
export async function blurThumb(canvas: OffscreenCanvas, dataUri: string, radius: number) { export async function blurThumb(canvas: OffscreenCanvas, thumbData: string, radius: number) {
const imageBitmap = await dataUriToImageBitmap(dataUri); const imageBitmap = thumbData.startsWith('data:')
? await dataUriToImageBitmap(thumbData)
: await blobUrlToImageBitmap(thumbData);
const { width, height } = canvas; const { width, height } = canvas;
const ctx = canvas.getContext('2d')!; const ctx = canvas.getContext('2d')!;
const isFilterSupported = 'filter' in ctx; const isFilterSupported = 'filter' in ctx;
@ -35,6 +37,12 @@ function dataUriToImageBitmap(dataUri: string) {
return createImageBitmap(blob); return createImageBitmap(blob);
} }
async function blobUrlToImageBitmap(blobUrl: string) {
const response = await fetch(blobUrl);
const blob = await response.blob();
return createImageBitmap(blob);
}
const api = { blurThumb }; const api = { blurThumb };
createWorkerInterface(api, 'media'); createWorkerInterface(api, 'media');