wood/CoverView
1
0
Fork 0
mirror of https://github.com/woodchen-ink/CoverView.git synced 2025-07-18 05:51:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: replace component export image with domtoimage

Browse Source
This commit is contained in:
rutik wankhade 2023-01-25 21:57:19 +05:30
parent 7358f5605a
commit 8efbecff75
7 changed files with 43 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
package-lock.json generated
View File

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

1
package.json
View File

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

7
public/index.html
View File

@ -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.

30
src/components/ComponentToImg.js
View File

@ -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);
});
}

1
src/components/Editor.js
View File

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

4
src/index.css
View File

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

2
tailwind.config.js
View File

@ -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']