diff --git a/src/components/account-info.jsx b/src/components/account-info.jsx index 37e5f599..bc72890d 100644 --- a/src/components/account-info.jsx +++ b/src/components/account-info.jsx @@ -453,12 +453,15 @@ function AccountInfo({ e.target.classList.add('loaded'); try { // Get color from four corners of image - const canvas = document.createElement('canvas'); + const canvas = window.OffscreenCanvas + ? new OffscreenCanvas(1, 1) + : document.createElement('canvas'); const ctx = canvas.getContext('2d', { willReadFrequently: true, }); canvas.width = e.target.width; canvas.height = e.target.height; + ctx.imageSmoothingEnabled = false; ctx.drawImage(e.target, 0, 0); // const colors = [ // ctx.getImageData(0, 0, 1, 1).data, diff --git a/src/components/avatar.jsx b/src/components/avatar.jsx index 0edc9d3b..f0afddfa 100644 --- a/src/components/avatar.jsx +++ b/src/components/avatar.jsx @@ -21,6 +21,7 @@ const canvas = window.OffscreenCanvas const ctx = canvas.getContext('2d', { willReadFrequently: true, }); +ctx.imageSmoothingEnabled = false; function Avatar({ url, size, alt = '', squircle, ...props }) { size = SIZES[size] || size || SIZES.m; diff --git a/src/components/status.jsx b/src/components/status.jsx index 441a034f..7ae36a3d 100644 --- a/src/components/status.jsx +++ b/src/components/status.jsx @@ -2167,10 +2167,13 @@ function Card({ card, selfReferential, instance }) { const w = 44; const h = 44; const blurhashPixels = decodeBlurHash(blurhash, w, h); - const canvas = document.createElement('canvas'); + const canvas = window.OffscreenCanvas + ? new OffscreenCanvas(1, 1) + : document.createElement('canvas'); canvas.width = w; canvas.height = h; const ctx = canvas.getContext('2d'); + ctx.imageSmoothingEnabled = false; const imageData = ctx.createImageData(w, h); imageData.data.set(blurhashPixels); ctx.putImageData(imageData, 0, 0);