adobe · catalan-adobe · Mar 15, 2024 · May 23, 2023 · May 23, 2023 · May 23, 2023
diff --git a/src/importer/PageImporter.js b/src/importer/PageImporter.js
@@ -249,9 +249,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
@@ -293,4 +293,22 @@ export default class DOMUtils {
       }, interval);
     });
   }
+
+  static getDataUrlFromB64Img(src) {
+    try {
+      const arr = src.split(',');
+      const type = arr[0].split(':')[1];
+      const b64Str = atob(arr[1]);
+      const bytesArray = new Uint8Array(b64Str.length);
+      for (let i = 0; i < b64Str.length; i += 1) {
+        bytesArray[i] = b64Str.charCodeAt(i);
+      }
+      const blob = new Blob([bytesArray], { type });
+      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/importers/PageImporter.spec.js b/test/importers/PageImporter.spec.js
@@ -156,7 +156,10 @@ describe('PageImporter tests - various options', () => {
 });
 
 describe('PageImporter tests - fixtures', () => {
-  const featureTest = async (feature) => {
+  const featureTest = async (feature, assertFn) => {
+    // eslint-disable-next-line no-param-reassign
+    assertFn = assertFn || ((got, want) => strictEqual(got, want, 'imported md is expected one'));
+
     class Test extends PageImporter {
       async fetch() {
         const html = await fs.readFile(path.resolve(__dirname, 'fixtures', `${feature}.spec.html`), 'utf-8');
@@ -183,7 +186,7 @@ describe('PageImporter tests - fixtures', () => {
 
     const md = await storageHandler.get(results[0].md);
     const expectedMD = await fs.readFile(path.resolve(__dirname, 'fixtures', `${feature}.spec.md`), 'utf-8');
-    strictEqual(md.trim(), expectedMD.trim(), 'imported md is expected one');
+    assertFn(md.trim(), expectedMD.trim(), 'imported md is expected one');
 
     // parse md to verify mdast
     const mdast = unified()
@@ -238,6 +241,14 @@ describe('PageImporter tests - fixtures', () => {
     await featureTest('subsup');
   });
 
+  it('import - images', async () => {
+    await featureTest('img', (got, want) => {
+      if (got.indexOf(want) !== 0) {
+        throw new Error('imported md is not expected one');
+      }
+    });
+  });
+
   it('import - video', async () => {
     await featureTest('video');
   });

diff --git a/test/importers/fixtures/img.spec.html b/test/importers/fixtures/img.spec.html
@@ -0,0 +1,11 @@
+<html>
+  <body>
+    <h1>Images sample</h1>
+    <h3>Standard Image - should be imported as is</h3>
+    <img src="https://www.server.com/image.jpg" alt="empty alt" />
+    <h3>Image with wrong Base64 data - should be removed</h3>
+    <img src="data:image/png;base64,--dummy--" alt="empty alt" />
+    <h3>Image with correct Base64 data - should be transformed into Object Url data</h3>
+    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="empty alt" />
+  </body>
+</html>
diff --git a/test/importers/fixtures/img.spec.md b/test/importers/fixtures/img.spec.md
@@ -0,0 +1,15 @@
+# Images sample
+
+### Standard Image - should be imported as is
+
+![empty alt][image0]
+
+### Image with wrong Base64 data - should be removed
+
+### Image with correct Base64 data - should be transformed into Object Url data
+
+![empty alt][image1]
+
+[image0]: https://www.server.com/image.jpg
+
+[image1]: blob:nodedata:
diff --git a/test/utils/DOMUtils.spec.js b/test/utils/DOMUtils.spec.js
@@ -432,3 +432,22 @@ describe('DOMUtils#getImgFromBackground', () => {
     test(createElement('p', {}, { 'background-image': 'url( /image.jpg )' }, 'Some content'), '<img src="/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);
+  });
+});