Files
graphfx/graphfx-ui/src/lib/imageLibrary.ts

54 lines
1.6 KiB
TypeScript

export type StoredImage = {
id: string
name: string
dataUrl: string
createdAt: number
}
const IMAGE_LIBRARY_KEY = 'GRAPHFX_UI_IMAGE_LIBRARY'
export function loadImageLibrary(): StoredImage[] {
try {
const raw = localStorage.getItem(IMAGE_LIBRARY_KEY)
if (!raw) return []
const parsed = JSON.parse(raw)
return Array.isArray(parsed)
? parsed.filter((item) => item?.id && item?.name && item?.dataUrl)
: []
} catch {
return []
}
}
export function saveImageLibrary(images: StoredImage[]) {
localStorage.setItem(IMAGE_LIBRARY_KEY, JSON.stringify(images))
}
function fileToDataUrl(file: File): Promise<string> {
return new Promise((resolve, reject) => {
const reader = new FileReader()
reader.onerror = () => reject(reader.error || new Error(`Could not read ${file.name}`))
reader.onload = () => resolve(String(reader.result || ''))
reader.readAsDataURL(file)
})
}
export async function filesToStoredImages(files: FileList | File[]): Promise<StoredImage[]> {
const imageFiles = Array.from(files).filter((file) => file.type.startsWith('image/'))
return Promise.all(imageFiles.map(async (file) => ({
id: crypto.randomUUID(),
name: file.name,
dataUrl: await fileToDataUrl(file),
createdAt: Date.now(),
})))
}
export function loadHtmlImage(dataUrl: string): Promise<HTMLImageElement> {
return new Promise((resolve, reject) => {
const image = new Image()
image.onload = () => resolve(image)
image.onerror = () => reject(new Error('Could not decode selected image.'))
image.src = dataUrl
})
}