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

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 { exportComponentAsPNG } from "react-component-export-image";
// import { exportComponentAsPNG } from "react-component-export-image";
import "./CoverImage.css";
import { ImgContext } from "../utils/ImgContext";
import unsplash from "../utils/unsplashConfig";
@ -10,17 +10,29 @@ const ComponentToImg = (props) => {
const { unsplashImage } = useContext(ImgContext);
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')
// unsplash.photos.trackDownload({ downloadLocation: 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
console.log(element)
console.log(element.offsetHeight)
// console.log(element)
// console.log(element.offsetHeight)
domtoimage.toPng(componentRef.current, {
let data = await domtoimage.toPng(componentRef.current, {
height: element.offsetHeight * 2,
width: element.offsetWidth * 2,
style: {
@ -30,14 +42,9 @@ const ComponentToImg = (props) => {
height: element.offsetHeight + "px",
}
})
.then(async (data) => {
var a = document.createElement("A");
a.href = data;
a.download = `cover.png`;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
});
await saveImage(data)
}

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

@ -1,12 +1,12 @@
import React from 'react';
const OutlineTheme = ({ config }) => {
const { title, bgColor, pattern, author, icon, font, customIcon, platform } = config;
const { title, bgColor, author, icon, font, customIcon, platform } = config;
return (
<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 }}
>
@ -23,15 +23,15 @@ const OutlineTheme = ({ config }) => {
</div>
}
<h1 className="text-3xl p-4 text-white md:text-5xl font-bold ">{title}</h1>
<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>
</div>
<div className={`${font} w-full h-16 flex mt-auto mb-0 p-2 px-6 items-center `}>
<h2 className="text-2xl text-white font-semibold">{author}</h2>
</div>
</div>
</div>