Compare commits

..

2 Commits

2 changed files with 21 additions and 17 deletions

View File

@ -1,6 +1,7 @@
<script lang="ts"> <script lang="ts">
import type { HTMLImgAttributes } from "svelte/elements"; import type { HTMLImgAttributes } from "svelte/elements";
import { lazyload } from "$lib/lazyload"; import { lazyload } from "$lib/lazyload";
import { fetch_image_base64 } from "$lib/image";
interface LazyImageProps extends HTMLImgAttributes { interface LazyImageProps extends HTMLImgAttributes {
/** The URL to the image resource to lazyload */ /** The URL to the image resource to lazyload */
@ -9,20 +10,6 @@
let { src, ...restProps }: LazyImageProps = $props(); let { src, ...restProps }: LazyImageProps = $props();
const blobToBase64 = (blob: Blob): Promise<any> => {
return new Promise((resolve, _) => {
const reader = new FileReader();
reader.onloadend = () => resolve(reader.result);
reader.readAsDataURL(blob);
});
};
const loadImage = async (url: string): Promise<any> => {
return await fetch(url)
.then((response) => response.blob())
.then((blob) => blobToBase64(blob));
};
const lazy_visible_handler = () => { const lazy_visible_handler = () => {
load = true; load = true;
}; };
@ -33,9 +20,7 @@
<div use:lazyload onLazyVisible={lazy_visible_handler}> <div use:lazyload onLazyVisible={lazy_visible_handler}>
{#if load} {#if load}
{#await loadImage(src)} {#await fetch_image_base64(src) then data}
<!-- Loading... -->
{:then data}
<img src={data} style="width: 100%" {...restProps} /> <img src={data} style="width: 100%" {...restProps} />
{/await} {/await}
{/if} {/if}

View File

@ -45,3 +45,22 @@ export const get_image_preview_event_handler = (id: string): ((event: Event) =>
return handler; return handler;
}; };
/** Convert a binary [Blob] to base64 string */
export const blob_to_base64 = (blob: Blob): Promise<string> => {
return new Promise((resolve, _) => {
const reader = new FileReader();
// This is fired once the file read has ended
reader.onloadend = () => resolve(reader.result?.toString() ?? "");
reader.readAsDataURL(blob);
});
};
/** Fetch an image from an URL using a fetch function [f] and return as base64 string */
export const fetch_image_base64 = async (url: string, f: Function = fetch): Promise<string> => {
return f(url)
.then((response: Response) => response.blob())
.then((blob: Blob) => blob_to_base64(blob));
};