fix: svg image preview rendering in firefox

uploadcare · Sep 22, 2022 · 1231951 · 1231951
1 parent 31f6dcc
commit 1231951
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 22 deletions.
diff --git a/blocks/FilePreview/FilePreview.js b/blocks/FilePreview/FilePreview.js
@@ -6,6 +6,7 @@ export class FilePreview extends Block {
   init$ = {
     ...this.ctxInit,
     checkerboard: false,
+    src: TRANSPARENT_PIXEL_SRC,
   };
 
   constructor() {
@@ -26,29 +27,29 @@ export class FilePreview extends Block {
 
   /** @param {HTMLImageElement} img */
   setImage(img) {
-    this.ref.img.src = img.src;
+    this.$.src = img.src;
   }
 
   /** @param {File} imgFile */
   setImageFile(imgFile) {
     let url = URL.createObjectURL(imgFile);
-    this.ref.img.src = url;
+    this.$.src = url;
     this._lastObjectUrl = url;
   }
 
   /** @param {String} url */
   setImageUrl(url) {
-    this.ref.img.src = url;
+    this.$.src = url;
   }
 
   clear() {
     URL.revokeObjectURL(this._lastObjectUrl);
-    this.ref.img.src = TRANSPARENT_PIXEL_SRC;
+    this.$.src = TRANSPARENT_PIXEL_SRC;
   }
 }
 
 FilePreview.template = /*html*/ `
-<img class="img-view" ref="img"/>
+<lr-img class="img-view" ref="img" set="@src: src; style.aa: src;"/>
 `;
 
 FilePreview.bindAttributes({

diff --git a/blocks/FilePreview/file-preview.css b/blocks/FilePreview/file-preview.css
@@ -9,7 +9,11 @@ lr-file-preview {
   justify-content: center;
 }
 
-lr-file-preview > .img-view {
+lr-file-preview > lr-img {
+  display: contents;
+}
+
+lr-file-preview > lr-img > .img-view {
   position: absolute;
   top: 0;
   right: 0;

diff --git a/blocks/UploadDetails/UploadDetails.js b/blocks/UploadDetails/UploadDetails.js
@@ -40,7 +40,7 @@ export class UploadDetails extends UploaderBlock {
   showNonImageThumb() {
     let color = window.getComputedStyle(this).getPropertyValue('--clr-generic-file-icon');
     let url = fileCssBg(color, 108, 108);
-    this.eCanvas.setImageUrl(url);
+    this.ref.filePreview.setImageUrl(url);
     this.set$({
       checkerboard: false,
     });
@@ -57,11 +57,12 @@ export class UploadDetails extends UploaderBlock {
           '*activityCaption': this.l10n('caption-edit-file'),
         });
       },
+      onDeactivate: () => {
+        this.ref.filePreview.clear();
+      },
       onClose: () => this.historyBack(),
     });
-    /** @type {import('../EditableCanvas/EditableCanvas.js').EditableCanvas} */
-    // @ts-ignore
-    this.eCanvas = this.ref.canvas;
+    /** @type {import('../FilePreview/FilePreview.js').FilePreview} */
     this.sub('*focusedEntry', (/** @type {import('../../abstract/TypedData.js').TypedData} */ entry) => {
       if (!entry) {
         return;
@@ -78,7 +79,6 @@ export class UploadDetails extends UploaderBlock {
       this.entry = entry;
       /** @type {File} */
       let file = entry.getValue('file');
-      this.eCanvas.clear();
       if (file) {
         /**
          * @private
@@ -87,7 +87,7 @@ export class UploadDetails extends UploaderBlock {
         this._file = file;
         let isImage = this._file.type.includes('image');
         if (isImage && !entry.getValue('cdnUrl')) {
-          this.eCanvas.setImageFile(this._file);
+          this.ref.filePreview.setImageFile(this._file);
           this.set$({
             checkerboard: true,
           });
@@ -127,16 +127,15 @@ export class UploadDetails extends UploaderBlock {
       });
       tmpSub('cdnUrl', (cdnUrl) => {
         const canUseCloudEditor = this.$['--cfg-use-cloud-image-editor'] && cdnUrl && this.entry.getValue('isImage');
-
-        this.eCanvas.clear();
+        cdnUrl && this.ref.filePreview.clear();
         this.set$({
           cdnUrl,
           cloudEditBtnHidden: !canUseCloudEditor,
         });
         if (cdnUrl && this.entry.getValue('isImage')) {
           // TODO: need to resize image to fit the canvas size
           let imageUrl = createCdnUrl(cdnUrl, createCdnUrlModifiers('format/auto', 'preview'));
-          this.eCanvas.setImageUrl(this.proxyUrl(imageUrl));
+          this.ref.filePreview.setImageUrl(this.proxyUrl(imageUrl));
         }
       });
     });
@@ -177,11 +176,11 @@ UploadDetails.template = /*html*/ `
 
   </div>
 
-  <lr-editable-canvas
+  <lr-file-preview
     tab-ctx="tab-view"
-    set="@disabled: !--cfg-use-local-image-editor; @checkerboard: checkerboard;"
-    ref="canvas">
-  </lr-editable-canvas>
+    set="@checkerboard: checkerboard;"
+    ref="filePreview">
+  </lr-file-preview>
 </lr-tabs>
 
 <div class="toolbar" set="@edit-disabled: cloudEditBtnHidden">

diff --git a/blocks/utils/resizeImage.js b/blocks/utils/resizeImage.js
@@ -2,7 +2,10 @@
  * @param {File} imgFile
  * @param {Number} [size]
  */
-export function resizeImage(imgFile, size = 40) {
+export function generateThumb(imgFile, size = 40) {
+  if (imgFile.type === 'image/svg+xml') {
+    return URL.createObjectURL(imgFile);
+  }
   let canvas = document.createElement('canvas');
   let ctx = canvas.getContext('2d');
   let img = new Image();
@@ -20,12 +23,15 @@ export function resizeImage(imgFile, size = 40) {
       ctx.fillRect(0, 0, canvas.width, canvas.height);
       ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
       canvas.toBlob((blob) => {
+        if (!blob) {
+          reject();
+          return;
+        }
         let url = URL.createObjectURL(blob);
         resolve(url);
-      }, 'image/png');
+      });
     };
     img.onerror = (err) => {
-      console.warn('Resize error...');
       reject(err);
     };
   });