Use File Saver library for cross-browser compatibility

shannonlui · May 24, 2019 · 39a4afa · 39a4afa
1 parent a8fece4
commit 39a4afa
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 9 deletions.
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "file-saver": "^2.0.2",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-redux": "^7.0.3",

diff --git a/client/src/pages/ImageEditor/Canvas/Canvas.js b/client/src/pages/ImageEditor/Canvas/Canvas.js
@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
+import { saveAs } from 'file-saver';
 
 import styles from './Canvas.module.css';
 import * as actions from '../../../store/actions';
@@ -63,15 +64,7 @@ class Canvas extends Component {
 
   saveCanvas = () => {
     const canvas = this.canvas.current;
-    if (canvas.msToBlob) {
-      // Save canvas as an image in IE
-      const blob = canvas.msToBlob();
-      window.navigator.msSaveBlob(blob, 'canvas.png');
-    } else { 
-      // Save canvas as an image in Chrome/Firefox
-      const image = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream');
-      window.location.href = image;
-    }
+    saveAs(canvas.toDataURL('image/png'), 'pixelartify.png');
   }
 
   getClosestColor(colors, target) {