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

fix: use async await in dom to image operation

Browse Source
This commit is contained in:
rutik wankhade 2023-01-25 23:12:00 +05:30
parent 446af28a26
commit e926bfce5f
2 changed files with 30 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/components/ComponentToImg.js
View File

@ -1,5 +1,5 @@
import React, { useContext } from "react"; import React, { useContext } from "react";
import { exportComponentAsPNG } from "react-component-export-image"; // import { exportComponentAsPNG } from "react-component-export-image";
import "./CoverImage.css"; import "./CoverImage.css";
import { ImgContext } from "../utils/ImgContext"; import { ImgContext } from "../utils/ImgContext";
import unsplash from "../utils/unsplashConfig"; import unsplash from "../utils/unsplashConfig";
@ -10,17 +10,29 @@ const ComponentToImg = (props) => {
const { unsplashImage } = useContext(ImgContext); const { unsplashImage } = useContext(ImgContext);
const componentRef = React.createRef(); const componentRef = React.createRef();
// download image and trigger download on unsplash api
const downloadImage = () => {
async function saveImage(data) {
var a = document.createElement("A");
a.href = data;
a.download = `cover.png`;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}
const downloadImage = async () => {
// exportComponentAsPNG(componentRef, 'cover') // exportComponentAsPNG(componentRef, 'cover')
// unsplash.photos.trackDownload({ downloadLocation: unsplashImage.downloadLink, });
// console.log(unsplashImage.downloadLink) // console.log(unsplashImage.downloadLink)
unsplash.photos.trackDownload({ downloadLocation: unsplashImage.downloadLink, });
const element = componentRef.current; // You can use element's ID or Class here const element = componentRef.current; // You can use element's ID or Class here
console.log(element) // console.log(element)
console.log(element.offsetHeight) // console.log(element.offsetHeight)
domtoimage.toPng(componentRef.current, { let data = await domtoimage.toPng(componentRef.current, {
height: element.offsetHeight * 2, height: element.offsetHeight * 2,
width: element.offsetWidth * 2, width: element.offsetWidth * 2,
style: { style: {
@ -30,14 +42,9 @@ const ComponentToImg = (props) => {
height: element.offsetHeight + "px", height: element.offsetHeight + "px",
} }
}) })
.then(async (data) => { await saveImage(data)
var a = document.createElement("A");
a.href = data;
a.download = `cover.png`;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
});
} }

6
src/components/Themes/OutlineTheme.js
View File

@ -1,12 +1,12 @@
import React from 'react'; import React from 'react';
const OutlineTheme = ({ config }) => { const OutlineTheme = ({ config }) => {
const { title, bgColor, pattern, author, icon, font, customIcon, platform } = config; const { title, bgColor, author, icon, font, customIcon, platform } = config;
return ( return (
<div className="p-4 bg-white "> <div className="p-4 bg-white ">
<div className={`overflow-y-hidden rounded flex flex-col text-gray-800 px-10 ${pattern} ${platform} `} <div className={`overflow-y-hidden rounded flex flex-col text-gray-800 px-10 ${platform} `}
style={{ backgroundColor: bgColor }} style={{ backgroundColor: bgColor }}
> >
@ -26,7 +26,7 @@ const OutlineTheme = ({ config }) => {
<div className={`${font} w-full h-16 flex mt-auto mb-0 p-2 px-6 items-center `}> <div className={`${font} w-full h-16 flex mt-auto mb-0 p-2 px-6 items-center `}>
<h2 className="text-xl text-white font-semibold">{author}</h2> <h2 className="text-2xl text-white font-semibold">{author}</h2>
</div> </div>
</div> </div>