feat: add support for base64 images

adobe · May 23, 2023 · 966c807 · 966c807
1 parent 1855846
commit 966c807
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 2 deletions.
diff --git a/src/importer/PageImporter.js b/src/importer/PageImporter.js
@@ -233,9 +233,14 @@ export default class PageImporter {
       }
 
       src = img.getAttribute('src');
+      // try to handle b64 img
       if (!src || src.indexOf('data:') === 0) {
-        // we cannot handle b64 asset for now, remove
-        img.remove();
+        const dataUrl = DOMUtils.getDataUrlFromB64Img(img.src);
+        if (dataUrl) {
+          img.setAttribute('src', dataUrl);
+        } else {
+          img.remove();
+        }
       }
 
       const alt = img.getAttribute('alt');

diff --git a/src/utils/DOMUtils.js b/src/utils/DOMUtils.js
@@ -11,6 +11,7 @@
  */
 
 import { JSDOM } from 'jsdom';
+import { Blob } from 'buffer';
 
 export default class DOMUtils {
   static EMPTY_TAGS_TO_PRESERVE = ['img', 'video', 'iframe', 'div', 'picture'];
@@ -280,4 +281,23 @@ export default class DOMUtils {
       }, interval);
     });
   }
+
+  static getDataUrlFromB64Img(src) {
+    try {
+      const arr = src.split(',');
+      const bstr = atob(arr[1]);
+      let n = bstr.length - 1;
+      const u8arr = new Uint8Array(n);
+      while (n >= 0) {
+        u8arr[n] = bstr.charCodeAt(n);
+        n -= 1;
+      }
+      const blob = new Blob([u8arr]);
+      return URL.createObjectURL(blob);
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.error(`get data url from a base64 image (${src}):`, e);
+      return null;
+    }
+  }
 }
diff --git a/test/utils/DOMUtils.spec.js b/test/utils/DOMUtils.spec.js
@@ -411,3 +411,22 @@ describe('DOMUtils#getImgFromBackground', () => {
     test(createElement('div', { class: 'someclass' }, { 'background-image': 'url("https://www.server.com/image.jpg")', background: 'rgb(0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box' }, '<div><div>Some divs</div><div>More divs</div></div>'), '<img src="https://www.server.com/image.jpg">');
   });
 });
+
+describe('DOMUtils#getDataUrlFromB64Img', () => {
+  const test = (img, expected) => {
+    const dataUrl = DOMUtils.getDataUrlFromB64Img(img.src);
+    return expected(dataUrl) === true;
+  };
+
+  it('no data url in original image', () => {
+    test(createElement('img', { src: 'https://www.server.com/image.jpg' }, {}, ''), (res) => res === null);
+  });
+
+  it('malformed base64 data url in original image', () => {
+    test(createElement('img', { src: 'data:image/png;base64,--dummy--' }, {}, ''), (res) => res === null);
+  });
+
+  it('base64 data url in original image', () => {
+    test(createElement('img', { src: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==' }, {}, ''), (res) => res.indexOf('blob:nodedata:') === 0);
+  });
+});