Try generate url data (#3222)

 wrap the draw image function in a try statement, if successful the image will be drawn in the canvas, if not return the data URL of the previous image

Author: juliaroldi

packages/roosterjs-content-model-plugins/lib/imageEdit/utils/generateDataURL.ts

@@ -50,23 +50,27 @@ export function generateDataURL(image: HTMLImageElement, editInfo: ImageMetadata
     canvas.height = targetHeight * devicePixelRatio;
 
     const context = canvas.getContext('2d');
-    if (context) {
-        context.scale(devicePixelRatio, devicePixelRatio);
-        context.translate(targetWidth / 2, targetHeight / 2);
-        context.rotate(angle);
-        context.scale(editInfo.flippedHorizontal ? -1 : 1, editInfo.flippedVertical ? -1 : 1);
-        context.drawImage(
-            image,
-            nWidth * left,
-            nHeight * top,
-            imageWidth,
-            imageHeight,
-            -width / 2,
-            -height / 2,
-            width,
-            height
-        );
-    }
 
-    return canvas.toDataURL('image/png', 1.0);
+    try {
+        if (context) {
+            context.scale(devicePixelRatio, devicePixelRatio);
+            context.translate(targetWidth / 2, targetHeight / 2);
+            context.rotate(angle);
+            context.scale(editInfo.flippedHorizontal ? -1 : 1, editInfo.flippedVertical ? -1 : 1);
+            context.drawImage(
+                image,
+                nWidth * left,
+                nHeight * top,
+                imageWidth,
+                imageHeight,
+                -width / 2,
+                -height / 2,
+                width,
+                height
+            );
+        }
+        return canvas.toDataURL('image/png', 1.0);
+    } catch {
+        return image.src;
+    }
 }

packages/roosterjs-content-model-plugins/test/imageEdit/utils/generateDataURLTest.ts

@@ -22,4 +22,27 @@ describe('generateDataURL', () => {
             'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAChJREFUOE9jZKAyYKSyeQyjBlIeoqNhOBqGZITAaLIhI9DQtIzAMAQASMYAFTvklLAAAAAASUVORK5CYII='
         );
     });
+
+    itChromeOnly('generate image url - draw image - error', () => {
+        const editInfo = {
+            src: 'test',
+            widthPx: 0,
+            heightPx: 0,
+            naturalWidth: 0,
+            naturalHeight: 0,
+            leftPercent: 0,
+            rightPercent: 0,
+            topPercent: 0.1,
+            bottomPercent: 0,
+            angleRad: 0,
+        };
+        const image = document.createElement('img');
+        image.width = 0; // Force error
+        image.height = 0;
+        image.src = 'https://th.bing.com/th/id/OIP.kJCCjl_yUweRlj94AdU-egHaFK?rs=1&pid=ImgDetMain';
+        const url = generateDataURL(image, editInfo);
+        expect(url).toBe(
+            'https://th.bing.com/th/id/OIP.kJCCjl_yUweRlj94AdU-egHaFK?rs=1&pid=ImgDetMain'
+        );
+    });
 });