feat: Added the functionality to save a shape as png

Author: atapas

components/core/App.js

@@ -6,6 +6,7 @@ import { harperFetch } from "../../utils/HarperFetch";
 
 // Dummy Shape Data
 // import { shapes } from "../../data/shapes";
+
 // loader
 import Loader from "react-loader-spinner";
 

components/utils/ShapeList.js

@@ -10,6 +10,12 @@ const Shape = dynamic(import("react-clip-path"), { ssr: false });
 // Switch
 import Switch from "react-switch";
 
+// html-to-image
+import { toPng } from 'html-to-image';
+
+// downloadjs
+import download from 'downloadjs';
+
 // Shape Listing Styled-Componentns
 import {
     ShapeCards,
@@ -49,6 +55,16 @@ const ShapeList = ({ data }) => {
     return name.split(" ").join("-");
   };
 
+  const saveAsPng = (event, id, name) => {
+    console.log('Save as Png');
+
+    toPng(document.getElementById(id)).then(function (dataUrl) {
+      console.log(dataUrl);
+      download(dataUrl, `${name}.png`);
+      toast.success(`${name}.png has been exported sucessfully!`);
+    });
+  }
+
   async function performCopy(event, formula) {
     event.preventDefault();
     try {

package.json

@@ -8,6 +8,8 @@
     "start": "next start"
   },
   "dependencies": {
+    "downloadjs": "^1.4.7",
+    "html-to-image": "^1.6.2",
     "next": "^10.0.0",
     "react": "17.0.1",
     "react-clip-path": "^0.0.6",

yarn.lock

@@ -711,6 +711,11 @@ domain-browser@^1.1.1:
   resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.2.0.tgz#3d31f50191a6749dd1375a7f522e823d42e54eda"
   integrity sha512-jnjyiM6eRyZl2H+W8Q/zLMA481hzi0eszAaBUzIVnmYVDBbnLxVNnfu1HgEBvCbL+71FrxMl3E6lpKH7Ge3OXA==
 
+downloadjs@^1.4.7:
+  version "1.4.7"
+  resolved "https://registry.yarnpkg.com/downloadjs/-/downloadjs-1.4.7.tgz#f69f96f940e0d0553dac291139865a3cd0101e3c"
+  integrity sha1-9p+W+UDg0FU9rCkROYZaPNAQHjw=
+
 electron-to-chromium@^1.3.723:
   version "1.3.752"
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.752.tgz#0728587f1b9b970ec9ffad932496429aef750d09"
@@ -957,6 +962,11 @@ hoist-non-react-statics@^3.0.0:
   dependencies:
     react-is "^16.7.0"
 
+html-to-image@^1.6.2:
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/html-to-image/-/html-to-image-1.6.2.tgz#9d444424cc638df13db5c7be810ac0d2962f5edd"
+  integrity sha512-X6X7wJW2KQ+AGqMeBITdntCcQnxBgZY62MdGOi042Y70+0SMe8/iJCzUv8RNaUoXqUjWw5FPyoTDmdGoapTQIQ==
+
 http-errors@1.7.3:
   version "1.7.3"
   resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.7.3.tgz#6c619e4f9c60308c38519498c14fbb10aacebb06"