diff --git a/components/user/QRcodeWallpaper.js b/components/user/QRcodeWallpaper.js new file mode 100644 index 00000000000..ddba3295792 --- /dev/null +++ b/components/user/QRcodeWallpaper.js @@ -0,0 +1,22 @@ +import React from "react"; +import { QRCodeSVG } from "qrcode.react"; +import LogoWide from "@public/logos/LogoWide"; + +function QRcodeWallpaper({ BASE_URL, data }) { + const fallbackImageSize = 120; + + return ( +
+ +
+ +
+
+ ); +} + +export default QRcodeWallpaper; diff --git a/components/user/UserProfile.js b/components/user/UserProfile.js index dbbf5521571..ba3b473d278 100644 --- a/components/user/UserProfile.js +++ b/components/user/UserProfile.js @@ -3,6 +3,7 @@ import { FaShare } from "react-icons/fa6"; import { QRCodeCanvas } from "qrcode.react"; import { saveAs } from "file-saver"; import { useRouter } from "next/router"; +import { toPng } from "html-to-image"; import FallbackImage from "@components/FallbackImage"; import UserSocial from "./UserSocials"; @@ -14,6 +15,19 @@ import Modal from "@components/Modal"; import ClipboardCopy from "@components/ClipboardCopy"; import { socials } from "@config/socials"; import Markdown from "@components/Markdown"; +import { renderToString } from "react-dom/server"; +import QRcodeWallpaper from "./QRcodeWallpaper"; + +const renderQRCodeWallpaperToString = (BASE_URL, data) => { + const qrCodeElement = React.createElement(QRcodeWallpaper, { + BASE_URL: BASE_URL, + data: data, + }); + + const qrCodeString = renderToString(qrCodeElement); + + return qrCodeString; +}; function UserProfile({ BASE_URL, data }) { const [qrShow, setQrShow] = useState(false); @@ -30,6 +44,26 @@ function UserProfile({ BASE_URL, data }) { saveAs(blob, `biodrop-${data.username}.png`), ); + const downloadWallpaper = async () => { + try { + const qrCodeString = renderQRCodeWallpaperToString(BASE_URL, data); + + const container = document.createElement("div"); + container.innerHTML = qrCodeString; + + const dataUrl = await toPng(container, { + cacheBust: false, + backgroundColor: "#122640", + width: 1080, + height: 1920, + }); + + saveAs(dataUrl, `Biodrop-Wallpaper-${data.username}.png`); + } catch (e) { + console.error(e); + } + }; + return ( <>
@@ -128,6 +162,13 @@ function UserProfile({ BASE_URL, data }) { )}
+
+ {qrShow && ( + + )} +
{qrShow && ( <> diff --git a/package-lock.json b/package-lock.json index b1e41cd7dce..a765b9b1ead 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23,6 +23,7 @@ "autoprefixer": "^10.4.19", "dotenv": "^16.4.5", "file-saver": "^2.0.5", + "html-to-image": "^1.11.11", "husky": "^9.0.11", "leaflet": "^1.9.4", "micro": "^10.0.1", @@ -12705,6 +12706,11 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/html-to-image": { + "version": "1.11.11", + "resolved": "https://registry.npmjs.org/html-to-image/-/html-to-image-1.11.11.tgz", + "integrity": "sha512-9gux8QhvjRO/erSnDPv28noDZcPZmYE7e1vFsBLKLlRlKDSqNJYebj6Qz1TGd5lsRV+X+xYyjCKjuZdABinWjA==" + }, "node_modules/html-url-attributes": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/html-url-attributes/-/html-url-attributes-3.0.0.tgz", diff --git a/package.json b/package.json index f96551406e5..253133cac81 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "autoprefixer": "^10.4.19", "dotenv": "^16.4.5", "file-saver": "^2.0.5", + "html-to-image": "^1.11.11", "husky": "^9.0.11", "leaflet": "^1.9.4", "micro": "^10.0.1",