3 files changed, 41 insertions, 3 deletions
diff --git a/app/javascript/flavours/glitch/util/base64.js b/app/javascript/flavours/glitch/util/base64.js
new file mode 100644
index 000000000..8226e2c54
--- /dev/null
+++ b/app/javascript/flavours/glitch/util/base64.js
@@ -0,0 +1,10 @@
+export const decode = base64 => {
+  const rawData = window.atob(base64);
+  const outputArray = new Uint8Array(rawData.length);
+
+  for (let i = 0; i < rawData.length; ++i) {
+    outputArray[i] = rawData.charCodeAt(i);
+  }
+
+  return outputArray;
+};
diff --git a/app/javascript/flavours/glitch/util/base_polyfills.js b/app/javascript/flavours/glitch/util/base_polyfills.js
index 7856b26f9..ad023eb73 100644
--- a/app/javascript/flavours/glitch/util/base_polyfills.js
+++ b/app/javascript/flavours/glitch/util/base_polyfills.js
@@ -3,7 +3,9 @@ import 'intl/locale-data/jsonp/en';
 import 'es6-symbol/implement';
 import includes from 'array-includes';
 import assign from 'object-assign';
+import values from 'object.values';
 import isNaN from 'is-nan';
+import { decode as decodeBase64 } from './base64';
 
 if (!Array.prototype.includes) {
   includes.shim();
@@ -13,6 +15,30 @@ if (!Object.assign) {
   Object.assign = assign;
 }
 
+if (!Object.values) {
+  values.shim();
+}
+
 if (!Number.isNaN) {
   Number.isNaN = isNaN;
 }
+
+if (!HTMLCanvasElement.prototype.toBlob) {
+  const BASE64_MARKER = ';base64,';
+
+  Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
+    value(callback, type = 'image/png', quality) {
+      const dataURL = this.toDataURL(type, quality);
+      let data;
+
+      if (dataURL.indexOf(BASE64_MARKER) >= 0) {
+        const [, base64] = dataURL.split(BASE64_MARKER);
+        data = decodeBase64(base64);
+      } else {
+        [, data] = dataURL.split(',');
+      }
+
+      callback(new Blob([data], { type }));
+    },
+  });
+}
diff --git a/app/javascript/flavours/glitch/util/load_polyfills.js b/app/javascript/flavours/glitch/util/load_polyfills.js
index 8927b7358..8cb81c1a6 100644
--- a/app/javascript/flavours/glitch/util/load_polyfills.js
+++ b/app/javascript/flavours/glitch/util/load_polyfills.js
@@ -12,11 +12,13 @@ function importExtraPolyfills() {
 
 function loadPolyfills() {
   const needsBasePolyfills = !(
+    Array.prototype.includes &&
+    HTMLCanvasElement.prototype.toBlob &&
     window.Intl &&
-    Object.assign &&
     Number.isNaN &&
-    window.Symbol &&
-    Array.prototype.includes
+    Object.assign &&
+    Object.values &&
+    window.Symbol
   );
 
   // Latest version of Firefox and Safari do not have IntersectionObserver.