fix: use data URL for marker images

reearth · Dec 17, 2021 · 576ea46 · 576ea46
1 parent e41f670
commit 576ea46
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 12 deletions.
diff --git a/src/components/molecules/Visualizer/Engine/Cesium/Marker/index.tsx b/src/components/molecules/Visualizer/Engine/Cesium/Marker/index.tsx
@@ -114,7 +114,7 @@ const Marker: React.FC<PrimitiveProps<Property>> = ({ layer }) => {
       : undefined;
   }, [extrude, location, height]);
 
-  const [canvas, img] = useIcon({
+  const [icon, img] = useIcon({
     image,
     imageSize,
     crop,
@@ -178,7 +178,7 @@ const Marker: React.FC<PrimitiveProps<Property>> = ({ layer }) => {
           />
         ) : (
           <BillboardGraphics
-            image={canvas}
+            image={icon}
             color={cesiumImageColor}
             horizontalOrigin={ho(horizontalOrigin)}
             verticalOrigin={vo(verticalOrigin)}

diff --git a/src/components/molecules/Visualizer/Engine/Cesium/common.ts b/src/components/molecules/Visualizer/Engine/Cesium/common.ts
@@ -102,7 +102,7 @@ export const useIcon = ({
   shadowBlur?: number;
   shadowOffsetX?: number;
   shadowOffsetY?: number;
-}): [HTMLCanvasElement, HTMLImageElement | undefined] => {
+}): [string, HTMLImageElement | undefined] => {
   const img = useImage(image);
   const draw = useCallback(
     can =>

diff --git a/src/util/image.ts b/src/util/image.ts
@@ -24,15 +24,12 @@ export const useImage = (src?: string): HTMLImageElement | undefined => {
   return img;
 };
 
-export const useCanvas = (cb: (canvas: HTMLCanvasElement) => void) => {
-  const canvas1 = useMemo(() => document.createElement("canvas"), []);
-  const canvas2 = useMemo(() => document.createElement("canvas"), []);
-  const [canvas, setCanvas] = useState(canvas1);
+export const useCanvas = (cb: (canvas: HTMLCanvasElement) => void): string => {
+  const can = useMemo(() => document.createElement("canvas"), []);
+  const [data, setData] = useState<string>("");
   useEffect(() => {
-    const can = canvas === canvas2 ? canvas1 : canvas2;
     cb(can);
-    setCanvas(can);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [canvas1, canvas2, cb]); // ignore canvas
-  return canvas;
+    setData(can.toDataURL());
+  }, [can, cb]);
+  return data;
 };