diff --git a/components/user/UserProfile.js b/components/user/UserProfile.js
index 462dbc87421..ce558b61eeb 100644
--- a/components/user/UserProfile.js
+++ b/components/user/UserProfile.js
@@ -3,6 +3,8 @@ 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 LogoWide from "@public/logos/LogoWide";
import FallbackImage from "@components/FallbackImage";
import UserSocial from "./UserSocials";
@@ -23,6 +25,7 @@ function UserProfile({ BASE_URL, data }) {
//Declared Ref object for QR
const qrRef = useRef(null);
+ const elementRef = useRef(null);
//qrRef.current is pointing to the DOM node and firstChild to its canvas
const downloadQR = () =>
@@ -30,6 +33,30 @@ function UserProfile({ BASE_URL, data }) {
saveAs(blob, `biodrop-${data.username}.png`),
);
+ const downloadWallpaper = async () => {
+ try {
+ // It removes the "hidden" class to make the element visible for rendering it.
+ elementRef.current.classList.remove("hidden");
+
+ const dataUrl = await toPng(elementRef.current, {
+ cacheBust: false,
+ backgroundColor: "#122640",
+ width: 1080,
+ height: 1920,
+ });
+
+ const link = document.createElement("a");
+ link.download = "Biodrop-QRCode-Wallpaper.png";
+ link.href = dataUrl;
+ link.click();
+
+ // It adds the "hidden" class back to hide the element again.
+ elementRef.current.classList.add("hidden");
+ } catch (e) {
+ console.log(e);
+ }
+ };
+
return (
<>
@@ -128,6 +155,13 @@ function UserProfile({ BASE_URL, data }) {
)}
+
+ {qrShow && (
+
+ )}
+
{qrShow && (
<>
@@ -159,6 +193,22 @@ function UserProfile({ BASE_URL, data }) {
>
)}
+ {/* Part that gets converted into the image */}
+
+ {qrShow && (
+
+ )}
+
+
+
+
>
);
diff --git a/package-lock.json b/package-lock.json
index 9a3b3d9a32f..438282872dd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6,7 +6,7 @@
"packages": {
"": {
"name": "biodrop",
- "version": "2.97.7",
+ "version": "2.85.4"
"hasInstallScript": true,
"license": "MIT",
"dependencies": {
@@ -23,6 +23,7 @@
"autoprefixer": "^10.4.16",
"dotenv": "^16.3.1",
"file-saver": "^2.0.5",
+ "html-to-image": "^1.11.11",
"husky": "^8.0.3",
"leaflet": "^1.9.4",
"micro": "^10.0.1",
@@ -14044,6 +14045,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 c7f12996c46..25f2b1c217f 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
"autoprefixer": "^10.4.16",
"dotenv": "^16.3.1",
"file-saver": "^2.0.5",
+ "html-to-image": "^1.11.11",
"husky": "^8.0.3",
"leaflet": "^1.9.4",
"micro": "^10.0.1",