From 5c0af84fb353d8f33882f6390858e36365466596 Mon Sep 17 00:00:00 2001
From: Brian Peiris <brianpeiris@gmail.com>
Date: Tue, 14 May 2019 10:00:00 -0700
Subject: [PATCH] Reuse createImageBitmap polyfill

---
 src/components/camera-tool.js          | 24 +-----------------------
 src/react-components/avatar-preview.js |  1 +
 src/utils/image-bitmap-utils.js        | 22 ++++++++++++++++++++++
 3 files changed, 24 insertions(+), 23 deletions(-)
 create mode 100644 src/utils/image-bitmap-utils.js

diff --git a/src/components/camera-tool.js b/src/components/camera-tool.js
index 8f419ab05a..4aab3e4412 100644
--- a/src/components/camera-tool.js
+++ b/src/components/camera-tool.js
@@ -1,4 +1,5 @@
 import { spawnMediaAround } from "../utils/media-utils";
+import { createImageBitmap } from "../utils/image-bitmap-utils";
 import { ObjectTypes } from "../object-types";
 import { paths } from "../systems/userinput/paths";
 import { SOUND_CAMERA_TOOL_TOOK_SNAPSHOT } from "../systems/sound-effects-system";
@@ -19,29 +20,6 @@ const pathsMap = {
   }
 };
 
-const createImageBitmap =
-  window.createImageBitmap ||
-  async function(data) {
-    return new Promise(resolve => {
-      // https://dev.to/nektro/createimagebitmap-polyfill-for-safari-and-edge-228
-      // https://gist.github.com/MonsieurV/fb640c29084c171b4444184858a91bc7
-
-      const canvas = document.createElement("canvas");
-      const ctx = canvas.getContext("2d");
-      canvas.width = data.width;
-      canvas.height = data.height;
-      ctx.putImageData(data, 0, 0);
-      const dataURL = canvas.toDataURL();
-      const img = document.createElement("img");
-
-      img.addEventListener("load", function() {
-        resolve(this);
-      });
-
-      img.src = dataURL;
-    });
-  };
-
 const snapCanvas = document.createElement("canvas");
 async function pixelsToPNG(pixels, width, height) {
   snapCanvas.width = width;
diff --git a/src/react-components/avatar-preview.js b/src/react-components/avatar-preview.js
index 231a323129..31684591fa 100644
--- a/src/react-components/avatar-preview.js
+++ b/src/react-components/avatar-preview.js
@@ -6,6 +6,7 @@ import classNames from "classnames";
 import { createDefaultEnvironmentMap } from "../components/environment-map";
 import { loadGLTF } from "../components/gltf-model-plus";
 import { disposeNode } from "../utils/three-utils";
+import { createImageBitmap } from "../utils/image-bitmap-utils";
 import styles from "../assets/stylesheets/avatar-preview.scss";
 
 const TEXTURE_PROPS = {
diff --git a/src/utils/image-bitmap-utils.js b/src/utils/image-bitmap-utils.js
new file mode 100644
index 0000000000..1d624971a6
--- /dev/null
+++ b/src/utils/image-bitmap-utils.js
@@ -0,0 +1,22 @@
+export const createImageBitmap =
+  window.createImageBitmap ||
+  async function(data) {
+    return new Promise(resolve => {
+      // https://dev.to/nektro/createimagebitmap-polyfill-for-safari-and-edge-228
+      // https://gist.github.com/MonsieurV/fb640c29084c171b4444184858a91bc7
+
+      const canvas = document.createElement("canvas");
+      const ctx = canvas.getContext("2d");
+      canvas.width = data.width;
+      canvas.height = data.height;
+      ctx.putImageData(data, 0, 0);
+      const dataURL = canvas.toDataURL();
+      const img = document.createElement("img");
+
+      img.addEventListener("load", function() {
+        resolve(this);
+      });
+
+      img.src = dataURL;
+    });
+  };