Mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2025-02-25 09:18:51 +01:00
Code Issues Projects Releases Packages Wiki Activity

Potential perf improvements for canvas

Browse source
This commit is contained in:
Lim Chee Aun 2024-03-10 23:25:07 +08:00
parent f5ea96a093
commit d63e6c87c4
3 changed files with 9 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/components/account-info.jsx
View file

@ -453,12 +453,15 @@ function AccountInfo({
e.target.classList.add('loaded'); e.target.classList.add('loaded');
try { try {
// Get color from four corners of image // 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', { const ctx = canvas.getContext('2d', {
willReadFrequently: true, willReadFrequently: true,
}); });
canvas.width = e.target.width; canvas.width = e.target.width;
canvas.height = e.target.height; canvas.height = e.target.height;
ctx.imageSmoothingEnabled = false;
ctx.drawImage(e.target, 0, 0); ctx.drawImage(e.target, 0, 0);
// const colors = [ // const colors = [
// ctx.getImageData(0, 0, 1, 1).data, // ctx.getImageData(0, 0, 1, 1).data,

1
src/components/avatar.jsx
View file

@ -21,6 +21,7 @@ const canvas = window.OffscreenCanvas
const ctx = canvas.getContext('2d', { const ctx = canvas.getContext('2d', {
willReadFrequently: true, willReadFrequently: true,
}); });
ctx.imageSmoothingEnabled = false;
function Avatar({ url, size, alt = '', squircle, ...props }) { function Avatar({ url, size, alt = '', squircle, ...props }) {
size = SIZES[size] || size || SIZES.m; size = SIZES[size] || size || SIZES.m;

5
src/components/status.jsx
View file

@ -2167,10 +2167,13 @@ function Card({ card, selfReferential, instance }) {
const w = 44; const w = 44;
const h = 44; const h = 44;
const blurhashPixels = decodeBlurHash(blurhash, w, h); 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.width = w;
canvas.height = h; canvas.height = h;
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext('2d');
ctx.imageSmoothingEnabled = false;
const imageData = ctx.createImageData(w, h); const imageData = ctx.createImageData(w, h);
imageData.data.set(blurhashPixels); imageData.data.set(blurhashPixels);
ctx.putImageData(imageData, 0, 0); ctx.putImageData(imageData, 0, 0);