feat: thumbhash improvments for reactive prop updates (#25287)

This commit is contained in:
Min Idzelis 2026-01-15 18:57:43 -05:00 committed by GitHub
parent 91592aa48e
commit 256d62e22d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -3,17 +3,27 @@ import { thumbHashToRGBA } from 'thumbhash';
/** /**
* Renders a thumbnail onto a canvas from a base64 encoded hash. * Renders a thumbnail onto a canvas from a base64 encoded hash.
* @param canvas
* @param param1 object containing the base64 encoded hash (base64Thumbhash: yourString)
*/ */
export function thumbhash(canvas: HTMLCanvasElement, { base64ThumbHash }: { base64ThumbHash: string }) { export function thumbhash(canvas: HTMLCanvasElement, options: { base64ThumbHash: string }) {
const ctx = canvas.getContext('2d'); render(canvas, options);
if (ctx) {
const { w, h, rgba } = thumbHashToRGBA(decodeBase64(base64ThumbHash)); return {
const pixels = ctx.createImageData(w, h); update(newOptions: { base64ThumbHash: string }) {
canvas.width = w; render(canvas, newOptions);
canvas.height = h; },
pixels.data.set(rgba); };
ctx.putImageData(pixels, 0, 0);
}
} }
const render = (canvas: HTMLCanvasElement, options: { base64ThumbHash: string }) => {
const ctx = canvas.getContext('2d');
if (!ctx) {
return;
}
const { w, h, rgba } = thumbHashToRGBA(decodeBase64(options.base64ThumbHash));
const pixels = ctx.createImageData(w, h);
canvas.width = w;
canvas.height = h;
pixels.data.set(rgba);
ctx.putImageData(pixels, 0, 0);
};