Something went wrong. Try again.
A decentralized music tracking and discovery platform built on AT Protocol 🎵 rocksky.app
spotify atproto lastfm musicbrainz scrobbling listenbrainz
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657import { toPng } from "html-to-image";import { API_URL } from "../consts";
const TRANSPARENT_PIXEL = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQI12NgAAIABQAABjE+ibYAAAAASUVORK5CYII=";
export async function fetchAsBase64(url: string): Promise<string> { const res = await fetch( `${API_URL}/proxy-image?url=${encodeURIComponent(url)}`, ); if (!res.ok) throw new Error(`proxy-image failed: ${res.status}`); const blob = await res.blob(); return new Promise<string>((resolve, reject) => { const reader = new FileReader(); reader.onload = () => resolve(reader.result as string); reader.onerror = reject; reader.readAsDataURL(blob); });}
/** Inline remote images as data URLs: html-to-image can't read cross-origin * pixels, so a capture would otherwise come out with blank artwork. */export async function resolveImages( urls: (string | undefined | null)[],): Promise<Record<string, string>> { const map: Record<string, string> = {}; const unique = [ ...new Set( urls.filter((u): u is string => !!u && !u.endsWith("/@jpeg")), ), ]; await Promise.all( unique.map((url) => fetchAsBase64(url) .then((b64) => { map[url] = b64; }) .catch(() => {}), ), ); return map;}
export async function downloadNodeAsPng(node: HTMLElement, filename: string) { await document.fonts.ready; const dataUrl = await toPng(node, { cacheBust: true, pixelRatio: 2, skipFonts: true, imagePlaceholder: TRANSPARENT_PIXEL, }); const link = document.createElement("a"); link.download = filename; link.href = dataUrl; link.click();}