Load images with cors allowed

Without allowing cors it is e.g. not possible to extract colors from an image
2025-01-26 03:51:43 +01:00
parent 2579ba92a3
commit 25e3fc7808
4 changed files with 30 additions and 10 deletions
--- a/src/modules/core/components/SpinnerImage.tsx
+++ b/src/modules/core/components/SpinnerImage.tsx
@@ -35,6 +35,7 @@ interface IProps {

    shouldDecode?: boolean;
    useFetchApi?: boolean;
+    allowCors?: boolean;

    priority?: Priority;

@@ -46,6 +47,7 @@ export const SpinnerImage = forwardRef((props: IProps, imgRef: ForwardedRef<HTML
        shouldLoad = true,
        shouldDecode,
        useFetchApi,
+        allowCors,
        src,
        alt,
        onLoad,
@@ -84,7 +86,7 @@ export const SpinnerImage = forwardRef((props: IProps, imgRef: ForwardedRef<HTML
            return () => {};
        }

-        const imageRequest = requestManager.requestImage(src, { priority, shouldDecode, useFetchApi });
+        const imageRequest = requestManager.requestImage(src, { priority, shouldDecode, useFetchApi, allowCors });
        let cacheTimeout: NodeJS.Timeout;

        const fetchImage = async () => {
@@ -156,6 +158,7 @@ export const SpinnerImage = forwardRef((props: IProps, imgRef: ForwardedRef<HTML
                        }),
                    ]}
                    ref={imgRef}
+                    crossOrigin={allowCors ? 'anonymous' : undefined}
                    src={imageSourceUrl}
                    alt={alt}
                    draggable={false}
--- a/src/modules/reader/utils/Reader.utils.ts
+++ b/src/modules/reader/utils/Reader.utils.ts
@@ -147,6 +147,7 @@ export const createUpdateReaderPageLoadState =
                    return prevState.toSpliced(index, 1, { url, isSpread: isSpreadPageFlag });
                });
            };
+            img.crossOrigin = 'anonymous';
            img.src = url;
        }

--- a/src/modules/tracker/components/cards/TrackerMangaCard.tsx
+++ b/src/modules/tracker/components/cards/TrackerMangaCard.tsx
@@ -152,6 +152,7 @@ export const TrackerMangaCard = ({
                                <TrackerMangaCardLink url={manga.trackingUrl}>
                                    <SpinnerImage
                                        useFetchApi={false}
+                                        allowCors={false}
                                        alt={manga.title}
                                        src={manga.coverUrl}
                                        spinnerStyle={{ width: '100%', height: '100%' }}