Editor: Fix BlurHash generation (#12355)

GoogleForCreators · Sep 22, 2022 · f7106d1 · f7106d1
1 parent 371d51f
commit f7106d1
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 2 deletions.
diff --git a/packages/media/src/preloadImage.ts b/packages/media/src/preloadImage.ts
@@ -38,7 +38,13 @@ function preloadImage({
   height,
 }: ImageArguments): Promise<HTMLImageElement> {
   return new Promise((resolve, reject) => {
-    const image = new window.Image(Number(width), Number(height));
+    // If no width or height are provided, set them to undefined
+    // so that is preloaded with its full dimensions.
+    // Avoids creating an image with 0x0 dimensions.
+    const image = new window.Image(
+      width ? Number(width) : undefined,
+      height ? Number(height) : undefined
+    );
     image.onload = () => resolve(image);
     image.onerror = reject;
     image.decoding = 'async';

diff --git a/packages/story-editor/src/utils/getBlurHashFromImage.js b/packages/story-editor/src/utils/getBlurHashFromImage.js
@@ -42,7 +42,16 @@ const getBlurHashFromImage = async (src) => {
   } catch {
     return Promise.reject(new Error('Failed to get blurhash from image'));
   }
-  const imageData = getImageData(image);
+
+  let imageData;
+
+  try {
+    imageData = getImageData(image);
+  } catch {
+    // For example if `CanvasRenderingContext2D.getImageData()` throws.
+    return Promise.reject(new Error('Failed to get blurhash from image'));
+  }
+
   const { data, width, height } = imageData;
 
   const trackTiming = getTimeTracker('load_get_blurhash');