From c00234c1a7760688fc0fcc44fcd3c1239c1b28f2 Mon Sep 17 00:00:00 2001
From: DD Liu <liudi08@gmail.com>
Date: Wed, 2 May 2018 15:09:05 -0400
Subject: [PATCH] Fix image conversion in firefox and add fallback (#417)

---
 src/containers/paper-canvas.jsx | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/containers/paper-canvas.jsx b/src/containers/paper-canvas.jsx
index 1313b05f..355e37f8 100644
--- a/src/containers/paper-canvas.jsx
+++ b/src/containers/paper-canvas.jsx
@@ -107,7 +107,18 @@ class PaperCanvas extends React.Component {
             paper.project.activeLayer.removeChildren();
             this.props.onUpdateImage();
         };
-        img.src = `data:image/svg+xml;charset=utf-8,${svgString}`;
+        img.onerror = () => {
+            // Fallback if browser does not support SVG data URIs in images.
+            // The problem with rasterize is that it will anti-alias.
+            const raster = paper.project.activeLayer.rasterize(72, false /* insert */);
+            raster.onLoad = () => {
+                getRaster().drawImage(raster.canvas, raster.bounds.topLeft);
+                paper.project.activeLayer.removeChildren();
+                this.props.onUpdateImage();
+            };
+        };
+        // Hash tags will break image loading without being encoded first
+        img.src = `data:image/svg+xml;utf8,${encodeURIComponent(svgString)}`;
     }
     convertToVector () {
         this.props.clearSelectedItems();