68 lines
2.0 KiB
React
68 lines
2.0 KiB
React
import html2canvas from "html2canvas";
|
|
import ShareIcon from "@mui/icons-material/Share";
|
|
import { Button } from "@mui/material";
|
|
import { useTheme } from "@emotion/react";
|
|
|
|
const ShareComponent = ({ elementToCapture, fileName = "screenshot" }) => {
|
|
const theme = useTheme();
|
|
const captureAndShare = async () => {
|
|
try {
|
|
// Temporarily apply styles directly to the element
|
|
const originalBackground = elementToCapture.current.style.background;
|
|
const originalPadding = elementToCapture.current.style.padding;
|
|
|
|
elementToCapture.current.style.background = `radial-gradient(circle, ${theme.palette.gradient.color1}, ${theme.palette.gradient.color2}, ${theme.palette.gradient.color3}, ${theme.palette.gradient.color4}, ${theme.palette.gradient.color5})`;
|
|
elementToCapture.current.style.padding = `${theme.spacing(20)}`;
|
|
|
|
// Capture the element directly
|
|
const canvas = await html2canvas(elementToCapture.current, {
|
|
useCORS: true,
|
|
scale: 2,
|
|
allowTaint: true,
|
|
backgroundColor: null,
|
|
});
|
|
|
|
// Restore original styles
|
|
elementToCapture.current.style.background = originalBackground;
|
|
elementToCapture.current.style.padding = originalPadding;
|
|
|
|
const imageBlob = await new Promise((resolve) =>
|
|
canvas.toBlob(resolve, "image/png")
|
|
);
|
|
|
|
const file = new File([imageBlob], `${fileName}.png`, {
|
|
type: "image/png",
|
|
});
|
|
|
|
if (navigator.share) {
|
|
await navigator.share({
|
|
files: [file],
|
|
title: "Screenshot",
|
|
text: "Check out this screenshot!",
|
|
});
|
|
} else {
|
|
const url = URL.createObjectURL(imageBlob);
|
|
const a = document.createElement("a");
|
|
a.href = url;
|
|
a.download = `${fileName}.png`;
|
|
a.click();
|
|
URL.revokeObjectURL(url);
|
|
}
|
|
} catch (error) {
|
|
console.error(error);
|
|
}
|
|
};
|
|
return (
|
|
<Button
|
|
variant="outlined"
|
|
startIcon={<ShareIcon sx={{ color: theme.palette.success.main }} />}
|
|
color="success"
|
|
onClick={captureAndShare}
|
|
>
|
|
Share
|
|
</Button>
|
|
);
|
|
};
|
|
|
|
export default ShareComponent;
|