fix cross origin image loading race condition

Author: seveibar

src/FullImageSegmentationAnnotator/index.story.js

@@ -45,6 +45,37 @@ storiesOf("FullImageSegmentationAnnotator.Basic", module)
       />
     </div>
   ))
+  .add("S3 CORS domain", () => (
+    <div style={{ width: "100vw", height: "100vh" }}>
+      <FullImageSegmentationAnnotator
+        images={[
+          {
+            name: "Seve's Desk",
+            src:
+              "https://s3.amazonaws.com/datasets.workaround.online/faces/010041.jpg",
+            regions: [
+              [0, 100, 125],
+              [0, 100, 150],
+              [1, 40, 280],
+              [1, 10, 10],
+              [1, 240, 300],
+            ].map(([cls, y, x], i) => ({
+              cls: ["fg", "bg"][cls],
+              color: "hsl(162,100%,50%)",
+              editingLabels: false,
+              highlighted: false,
+              id: "a" + i,
+              type: "point",
+              x: x / 320,
+              y: y / 249,
+            })),
+          },
+        ]}
+        regionClsList={["bg", "fg"]}
+        onExit={action("onExit")}
+      />
+    </div>
+  ))
   .add("Orange 3 Class", () => (
     <div style={{ width: "100vw", height: "100vh" }}>
       <FullImageSegmentationAnnotator
@@ -70,7 +101,7 @@ storiesOf("FullImageSegmentationAnnotator.Basic", module)
             })),
           },
         ]}
-        regionClsList={["bg", "orange" , "hand"]}
+        regionClsList={["bg", "orange", "hand"]}
         onExit={action("onExit")}
       />
     </div>

src/ImageMask/index.js

@@ -3,6 +3,7 @@
 import React, { useState, useEffect, useMemo, useRef } from "react"
 import { colorInts } from "../colors"
 import { useDebounce } from "react-use"
+import loadImage from "./load-image"
 
 import MMGC_INIT from "mmgc1-cpp"
 
@@ -24,25 +25,11 @@ export const ImageMask = ({
 
   useEffect(() => {
     if (!imageSrc) return
-    const canvas = document.createElement("canvas")
-    const ctx = canvas.getContext("2d")
 
-    const image = new Image()
-    image.crossOrigin = "anonymous"
-    image.src = imageSrc
-    image.onload = () => {
-      canvas.width = image.naturalWidth
-      canvas.height = image.naturalHeight
-      ctx.drawImage(image, 0, 0)
-      const imageData = ctx.getImageData(
-        0,
-        0,
-        image.naturalWidth,
-        image.naturalHeight
-      )
+    loadImage(imageSrc).then((imageData) => {
       superPixelsGenerated.current = false
       setSampleImageData(imageData)
-    }
+    })
   }, [imageSrc])
 
   useDebounce(

src/ImageMask/load-image.js

@@ -0,0 +1,32 @@
+export const loadImage = (imageSrc) => {
+  // Check if image is already loaded in a page element
+  let image = Array.from(document.getElementsByTagName("img")).find(
+    (img) => img.src === imageSrc
+  )
+
+  const canvas = document.createElement("canvas")
+  const ctx = canvas.getContext("2d")
+
+  if (!image) {
+    image = new Image()
+    image.crossOrigin = "anonymous"
+    image.src = imageSrc
+  }
+
+  return new Promise((resolve, reject) => {
+    image.onload = () => {
+      canvas.width = image.naturalWidth
+      canvas.height = image.naturalHeight
+      ctx.drawImage(image, 0, 0)
+      const imageData = ctx.getImageData(
+        0,
+        0,
+        image.naturalWidth,
+        image.naturalHeight
+      )
+      resolve(imageData)
+    }
+  })
+}
+
+export default loadImage

src/VideoOrImageCanvasBackground/index.js

@@ -119,6 +119,7 @@ export default ({
       ref={imageRef}
       style={stylePosition}
       onLoad={onImageLoaded}
+      crossOrigin="anonymous"
     />
   ) : (
     <Video