Inlined data URLs being encoded without a mimetype.

[ZM]

Use case: description, code

https://jsfiddle.net/z9042mw8/1/

The getAndEncode() function is well able to fetch base64 URL with correct mimetype. However, the mimetype is manually removed from the result during the inlining and poorly restored later.

Proposed fix:

diff --git a/src/dom-to-image-more.js b/src/dom-to-image-more.js
index 044adea9..84913046 100644
--- a/src/dom-to-image-more.js
+++ b/src/dom-to-image-more.js
@@ -446,8 +446,6 @@
         return {
             escape: escapeRegEx,
             parseExtension: parseExtension,
-            mimeType: mimeType,
-            dataAsUrl: dataAsUrl,
             isDataUrl: isDataUrl,
             canvasToBlob: canvasToBlob,
             resolveUrl: resolveUrl,
@@ -538,11 +536,6 @@
             }
         }
 
-        function mimeType(url) {
-            const extension = parseExtension(url).toLowerCase();
-            return mimes()[extension] || '';
-        }
-
         function isDataUrl(url) {
             return url.search(/^(data:)/) !== -1;
         }
@@ -666,8 +659,7 @@
 
                         const encoder = new FileReader();
                         encoder.onloadend = function () {
-                            const content = encoder.result.split(/,/)[1];
-                            resolve(content);
+                            resolve(encoder.result);
                         };
                         encoder.readAsDataURL(request.response);
                     }
@@ -689,10 +681,6 @@
             return cacheEntry.promise;
         }
 
-        function dataAsUrl(content, type) {
-            return `data:${type};base64,${content}`;
-        }
-
         function escapeRegEx(string) {
             return string.replace(/([.*+?^${}()|\[\]\/\\])/g, '\\$1');
         }
@@ -772,9 +760,6 @@
                     return baseUrl ? util.resolveUrl(urlValue, baseUrl) : urlValue;
                 })
                 .then(get || util.getAndEncode)
-                .then(function (data) {
-                    return util.dataAsUrl(data, util.mimeType(url));
-                })
                 .then(function (dataUrl) {
                     return string.replace(urlAsRegex(url), `\$1${dataUrl}\$3`);
                 });
@@ -891,9 +876,6 @@
 
                 return Promise.resolve(element.src)
                     .then(get || util.getAndEncode)
-                    .then(function (data) {
-                        return util.dataAsUrl(data, util.mimeType(element.src));
-                    })
                     .then(function (dataUrl) {
                         return new Promise(function (resolve) {
                             element.onload = resolve;

Expected behavior

Expected the image to work in the JSFiddle

Actual behavior (stack traces, console logs etc)

The image breaks and the alt text for the mathematical formula appears.

Library version

Confirmed in 2.13.1 and also dom-to-image.

Browsers

• Chrome 49+
• Firefox 45+