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