Refactor crossOrigin handling for image loading

In my last change, I didn't try to change the APIs too much, and kept the concept of `crossOrigin` running through `getBestImageUrlForLayer`.

Now, I've moved the `safeImageUrl` call _outside_ `getBestImageUrlForLayer`, by putting it at the call site: We now call `safeImageUrl` from `loadImage` (which needs to know the `crossOrigin` flag anyway!), and at the `img` tag call site.

This simplifies all of the call sites a lot, I think!

src/app/WardrobePage/OutfitControls.js

@@ -607,11 +607,7 @@ function useDownloadableImage(visibleLayers) {
     //       performance (can use cached SVG), and predictability (image will
     //       look like what you see here).
     const imagePromises = visibleLayers.map((layer) =>
-      loadImage({
-        src: getBestImageUrlForLayer(layer, {
-          hiResMode,
-          crossOrigin: "anonymous",
-        }),
+      loadImage(getBestImageUrlForLayer(layer, { hiResMode }), {
         crossOrigin: "anonymous",
       })
     );

src/app/components/OutfitMovieLayer.js

@@ -289,10 +289,7 @@ export async function loadMovieLibrary(librarySrc) {
   const manifestImages = new Map(
     library.properties.manifest.map(({ id, src }) => [
       id,
-      loadImage({
-        src: safeImageUrl(librarySrcDir + "/" + src, {
-          crossOrigin: "anonymous",
-        }),
+      loadImage(librarySrcDir + "/" + src, {
         crossOrigin: "anonymous",
       }),
     ])

src/app/components/OutfitPreview.js

@@ -262,7 +262,9 @@ export function OutfitLayers({
                   ) : (
                     <Box
                       as="img"
-                      src={getBestImageUrlForLayer(layer, { hiResMode })}
+                      src={safeImageUrl(
+                        getBestImageUrlForLayer(layer, { hiResMode })
+                      )}
                       alt=""
                       objectFit="contain"
                       maxWidth="100%"
@@ -332,14 +334,11 @@ export function FullScreenCenter({ children, ...otherProps }) {
   );
 }
 
-export function getBestImageUrlForLayer(
-  layer,
-  { hiResMode = false, crossOrigin = null } = {}
-) {
+export function getBestImageUrlForLayer(layer, { hiResMode = false } = {}) {
   if (hiResMode && layer.svgUrl) {
-    return safeImageUrl(layer.svgUrl, { crossOrigin });
+    return layer.svgUrl;
   } else {
-    return safeImageUrl(layer.imageUrl, { crossOrigin });
+    return layer.imageUrl;
   }
 }
 
@@ -386,12 +385,12 @@ export function usePreloadLayers(layers) {
             })
           );
         } else {
-          return loadImage({
-            src: getBestImageUrlForLayer(layer, { hiResMode }),
-          }).then((image) => ({
-            type: "image",
-            image,
-          }));
+          return loadImage(getBestImageUrlForLayer(layer, { hiResMode })).then(
+            (image) => ({
+              type: "image",
+              image,
+            })
+          );
         }
       });
 

src/app/util.js

@@ -352,7 +352,8 @@ export function useLocalStorage(key, initialValue) {
   return [storedValue, setValue];
 }
 
-export function loadImage({ src, crossOrigin = null }) {
+export function loadImage(rawSrc, { crossOrigin = null } = {}) {
+  const src = safeImageUrl(rawSrc, { crossOrigin });
   const image = new Image();
   const promise = new Promise((resolve, reject) => {
     image.onload = () => resolve(image);