| 1 | type State = {
|
| 2 | image: HTMLImageElement | null;
|
| 3 | error: unknown | null;
|
| 4 | };
|
| 5 | /**
|
| 6 | * Fetch and load an image for programatic use such as in a `<canvas>` element.
|
| 7 | *
|
| 8 | * @param imageOrUrl The `HtmlImageElement` or image url to load
|
| 9 | * @param crossOrigin The `crossorigin` attribute to set
|
| 10 | *
|
| 11 | * ```ts
|
| 12 | * const { image, error } = useImage('/static/kittens.png')
|
| 13 | * const ref = useRef<HTMLCanvasElement>()
|
| 14 | *
|
| 15 | * useEffect(() => {
|
| 16 | * const ctx = ref.current.getContext('2d')
|
| 17 | *
|
| 18 | * if (image) {
|
| 19 | * ctx.drawImage(image, 0, 0)
|
| 20 | * }
|
| 21 | * }, [ref, image])
|
| 22 | *
|
| 23 | * return (
|
| 24 | * <>
|
| 25 | * {error && "there was a problem loading the image"}
|
| 26 | * <canvas ref={ref} />
|
| 27 | * </>
|
| 28 | * ```
|
| 29 | */
|
| 30 | export default function useImage(imageOrUrl?: string | HTMLImageElement | null | undefined, crossOrigin?: 'anonymous' | 'use-credentials' | string): State;
|
| 31 | export {};
|