Compare commits
2 Commits
ebb6159b93
...
0b3184ba56
| Author | SHA1 | Date | |
|---|---|---|---|
| 0b3184ba56 | |||
| c09237e112 |
@ -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}
|
||||||
|
|||||||
@ -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));
|
||||||
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user