From 3c1248b471d9a181bb51b7a42d63d404ad5cb5a3 Mon Sep 17 00:00:00 2001 From: Alexander Zinchuk Date: Fri, 6 Sep 2024 15:42:59 +0200 Subject: [PATCH] Fallback to `fastBlur` for Safari --- .../offscreen-canvas/offscreen-canvas.worker.ts | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/src/lib/offscreen-canvas/offscreen-canvas.worker.ts b/src/lib/offscreen-canvas/offscreen-canvas.worker.ts index a0e5fab94..cd574f509 100644 --- a/src/lib/offscreen-canvas/offscreen-canvas.worker.ts +++ b/src/lib/offscreen-canvas/offscreen-canvas.worker.ts @@ -1,14 +1,23 @@ import { createWorkerInterface } from '../../util/createPostMessageInterface'; +import fastBlur from '../fastBlur'; + +const FAST_BLUR_ITERATIONS = 2; export async function blurThumb(canvas: OffscreenCanvas, dataUri: string, radius: number) { const imageBitmap = await dataUriToImageBitmap(dataUri); const { width, height } = canvas; const ctx = canvas.getContext('2d')!; + const isFilterSupported = 'filter' in ctx; - // Draw image twice to battle white-ish edges - ctx.drawImage(imageBitmap, 0, 0, width, height); - ctx.filter = `blur(${radius}px)`; - ctx.drawImage(imageBitmap, 0, 0, width, height); + if (isFilterSupported) { + ctx.filter = `blur(${radius}px)`; + } + + ctx.drawImage(imageBitmap, -radius * 2, -radius * 2, width + radius * 4, height + radius * 4); + + if (!isFilterSupported) { + fastBlur(ctx, 0, 0, width, height, radius, FAST_BLUR_ITERATIONS); + } } function dataUriToImageBitmap(dataUri: string) {