fix: Merge pull request #65 from waoai/fix/cross-origin-and-bb-mask

Fix for Cross Origin Image Loading and Bounding Box Masking

Author: seveibar

src/FullImageSegmentationAnnotator/index.story.js

@@ -22,6 +22,50 @@ storiesOf("FullImageSegmentationAnnotator.Basic", module)
             //   "https://a.allegroimg.com/s128/113a6e/09d2c0ed4f278610e555c95b1d50/Rama-BIANCHI-OLTRE-XR4-DISC-carbon-Vision-ACR-51cm-Dedykowany-a-do-kolarstwo-szosowe",
             // src: "https://i.imgur.com/Dv5lkQZ.png",
             src: orange,
+            regions: [
+              [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,
+              }))
+              .concat([
+                {
+                  cls: "fg",
+                  color: "hsl(162,100%,50%)",
+                  editingLabels: false,
+                  highlighted: false,
+                  id: "bb",
+                  type: "box",
+                  x: 0.3,
+                  y: 0.25,
+                  w: 0.35,
+                  h: 0.38,
+                },
+              ]),
+          },
+        ]}
+        regionClsList={["bg", "fg"]}
+        onExit={action("onExit")}
+      />
+    </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],
@@ -70,7 +114,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,33 +25,19 @@ 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(
     () => {
       if (hide) return
       if (!canvasRef) return
       if (!sampleImageData) return
-      if (regions.filter((cp) => cp.cls).length < 3) return
+      if (regions.filter((cp) => cp.cls).length < 2) return
       if (!mmgc.setImageSize) return
       const context = canvasRef.getContext("2d")
 
@@ -101,6 +88,19 @@ export const ImageMask = ({
         )
       }
       const classPolygons = regions
+        .map((r) => {
+          if (r.type !== "box") return r
+          return {
+            ...r,
+            type: "polygon",
+            points: [
+              [r.x, r.y],
+              [r.x + r.w, r.y],
+              [r.x + r.w, r.y + r.h],
+              [r.x, r.y + r.h],
+            ],
+          }
+        })
         .filter((r) => r.type === "polygon")
         .filter((r) => r.cls)
       for (const polygon of classPolygons) {

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