From 8efbecff75bc5d49b813ff552347bb1a94a00891 Mon Sep 17 00:00:00 2001
From: rutik wankhade <rutikwankhade2@gmail.com>
Date: Wed, 25 Jan 2023 21:57:19 +0530
Subject: [PATCH] feat: replace component export image with domtoimage

---
 package-lock.json                |  5 +++++
 package.json                     |  1 +
 public/index.html                |  7 ++++++-
 src/components/ComponentToImg.js | 30 +++++++++++++++++++++++++++---
 src/components/Editor.js         |  1 +
 src/index.css                    |  4 ++--
 tailwind.config.js               |  2 +-
 7 files changed, 43 insertions(+), 7 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 45fe4c2..2db9c8f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5777,6 +5777,11 @@
         }
       }
     },
+    "dom-to-image": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/dom-to-image/-/dom-to-image-2.6.0.tgz",
+      "integrity": "sha512-Dt0QdaHmLpjURjU7Tnu3AgYSF2LuOmksSGsUcE6ItvJoCWTBEmiMXcqBdNSAm9+QbbwD7JMoVsuuKX6ZVQv1qA=="
+    },
     "domelementtype": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz",
diff --git a/package.json b/package.json
index 3d80fc0..cd1036b 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
+    "dom-to-image": "^2.6.0",
     "dotenv": "^16.0.1",
     "react": "^16.13.1",
     "react-component-export-image": "^0.1.6",
diff --git a/public/index.html b/public/index.html
index 2f0d043..85d77a5 100644
--- a/public/index.html
+++ b/public/index.html
@@ -24,13 +24,18 @@
   <link rel="apple-touch-icon" href="./logo.png" />
   <!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css"
     integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous"> -->
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/konpa/devicon@master/devicon.min.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/konpa/devicon@master/devicon.min.css" crossorigin="anonymous">
   <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
 
   <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+
+
+
+  <link href="https://fonts.googleapis.com/css2?family=Anek+Latin:wght@400;500;600;700&display=swap?" rel="stylesheet" crossorigin="anonymous">
+
   <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
diff --git a/src/components/ComponentToImg.js b/src/components/ComponentToImg.js
index 264c0f2..e5848da 100644
--- a/src/components/ComponentToImg.js
+++ b/src/components/ComponentToImg.js
@@ -3,6 +3,7 @@ import { exportComponentAsPNG } from "react-component-export-image";
 import "./CoverImage.css";
 import { ImgContext } from "../utils/ImgContext";
 import unsplash from "../utils/unsplashConfig";
+import domtoimage from "dom-to-image";
 
 const ComponentToImg = (props) => {
 
@@ -11,9 +12,32 @@ const ComponentToImg = (props) => {
 
 	// download image and trigger download on unsplash api
 	const downloadImage = () => {
-		exportComponentAsPNG(componentRef, 'cover')
-		 unsplash.photos.trackDownload({ downloadLocation: unsplashImage.downloadLink, });
-		console.log(unsplashImage.downloadLink)
+		// exportComponentAsPNG(componentRef, 'cover')
+		//  unsplash.photos.trackDownload({ downloadLocation: unsplashImage.downloadLink, });
+		// console.log(unsplashImage.downloadLink)
+		const element = componentRef.current; // You can use element's ID or Class here
+
+		console.log(element)
+		console.log(element.offsetHeight)
+
+		domtoimage.toPng(componentRef.current, {
+			height: element.offsetHeight * 2,
+			width: element.offsetWidth * 2,
+			style: {
+				transform: "scale(" + 2 + ")",
+				transformOrigin: "top left",
+				width: element.offsetWidth + "px",
+				height: element.offsetHeight + "px",
+			}
+		})
+			.then((data) => {
+				var a = document.createElement("A");
+				a.href = data;
+				a.download = `cover.png`;
+				document.body.appendChild(a);
+				a.click();
+				document.body.removeChild(a);
+			});
 	}
 
 
diff --git a/src/components/Editor.js b/src/components/Editor.js
index 96b08c4..a1eaaa3 100644
--- a/src/components/Editor.js
+++ b/src/components/Editor.js
@@ -14,6 +14,7 @@ import theme4 from '../assets/images/theme4.webp'
 import theme5 from '../assets/images/theme5.webp'
 
 
+
 const defaultSettings = {
 	title: "A begineers guide to frontend development",
 	bgColor: "#ffe9e3",
diff --git a/src/index.css b/src/index.css
index bd4c23c..128c6b3 100644
--- a/src/index.css
+++ b/src/index.css
@@ -2,10 +2,10 @@
 @tailwind components;
 @tailwind utilities;
 
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap?crossorigin=anonymous');
 @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');
 
-@import url('https://fonts.googleapis.com/css2?family=Anek+Latin:wght@400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Anek+Latin:wght@400;500;600;700&display=swap?crossorigin=anonymous');
 @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@600;700;800&display=swap');
 
 
diff --git a/tailwind.config.js b/tailwind.config.js
index 434b45e..636f5ea 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -8,7 +8,7 @@ module.exports = {
         Inter: ['Inter', 'sans-serif'],
         Poppins: ['Poppins', 'sans-serif'],
         Anek: ['Anek Latin', 'sans-serif'],
-                                Nunito: ['Nunito', 'sans-serif']
+        Nunito: ['Nunito', 'sans-serif']