Merge pull request #10029 from jasongrout/svgurl

Use blobs to set the svg source of an image in the image viewer

packages/imageviewer/src/widget.ts

@@ -102,6 +102,16 @@ export class ImageViewer extends Widget implements Printing.IPrintable {
     this._updateStyle();
   }
 
+  /**
+   * Dispose of resources held by the image viewer.
+   */
+  dispose(): void {
+    if (this._img.src) {
+      URL.revokeObjectURL(this._img.src || '');
+    }
+    super.dispose();
+  }
+
   /**
    * Reset rotation and flip transformations.
    */
@@ -178,11 +188,15 @@ export class ImageViewer extends Widget implements Printing.IPrintable {
     if (!cm) {
       return;
     }
+    const oldurl = this._img.src || '';
     let content = context.model.toString();
-    if (cm.format !== 'base64') {
-      content = btoa(content);
+    if (cm.format === 'base64') {
+      this._img.src = `data:${this._mimeType};base64,${content}`;
+    } else {
+      const a = new Blob([content], { type: this._mimeType });
+      this._img.src = URL.createObjectURL(a);
     }
-    this._img.src = `data:${this._mimeType};base64,${content}`;
+    URL.revokeObjectURL(oldurl);
   }
 
   /**

packages/imageviewer/test/widget.spec.ts

@@ -36,6 +36,14 @@ class LogImage extends ImageViewer {
   }
 }
 
+// jsdom does not have createObjectURL and revokeObjectURL, so we define them.
+if (typeof window.URL.createObjectURL === 'undefined') {
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  const noOp = () => {};
+  Object.defineProperty(window.URL, 'createObjectURL', { value: noOp });
+  Object.defineProperty(window.URL, 'revokeObjectURL', { value: noOp });
+}
+
 /**
  * The common image model.
  */