feat: replace component export image with domtoimage

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",

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",

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.

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')
+		// exportComponentAsPNG(componentRef, 'cover')
-		 unsplash.photos.trackDownload({ downloadLocation: unsplashImage.downloadLink, });
+		//  unsplash.photos.trackDownload({ downloadLocation: unsplashImage.downloadLink, });
-		console.log(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);
+			});
 	}
 
 

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",

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');