From efefbfee8087789c803d210317cf2cfbce54c0dd Mon Sep 17 00:00:00 2001
From: hunar <hunar@netling.digital>
Date: Mon, 23 Oct 2023 18:41:47 +0530
Subject: [PATCH] fixed text pixelation issue on downloaded qr labels

---
 app/routes/_layout+/assets.$assetId.qr.tsx | 40 ++++++++++++++--------
 global.d.ts                                |  3 ++
 package-lock.json                          |  6 ++++
 package.json                               |  1 +
 4 files changed, 35 insertions(+), 15 deletions(-)
 create mode 100644 global.d.ts

diff --git a/app/routes/_layout+/assets.$assetId.qr.tsx b/app/routes/_layout+/assets.$assetId.qr.tsx
index b34bf5c6c..7f048bbf0 100644
--- a/app/routes/_layout+/assets.$assetId.qr.tsx
+++ b/app/routes/_layout+/assets.$assetId.qr.tsx
@@ -3,6 +3,7 @@ import type { Asset } from "@prisma/client";
 import type { LoaderFunctionArgs } from "@remix-run/node";
 import { json } from "@remix-run/node";
 import { Link, useLoaderData } from "@remix-run/react";
+import { changeDpiDataUrl } from "changedpi";
 import domtoimage from "dom-to-image";
 import { useReactToPrint } from "react-to-print";
 import { XIcon } from "~/components/icons";
@@ -11,7 +12,6 @@ import { useMatchesData } from "~/hooks";
 import { requireAuthSession } from "~/modules/auth";
 import { createQr, generateCode, getQrByAssetId } from "~/modules/qr";
 import { getCurrentSearchParams, slugify } from "~/utils";
-
 type SizeKeys = "cable" | "small" | "medium" | "large";
 
 export async function loader({ request, params }: LoaderFunctionArgs) {
@@ -67,16 +67,27 @@ export default function QRPreview() {
     // making sure that the captureDiv and downloadBtn exists in DOM
     if (captureDiv && downloadBtn) {
       e.preventDefault();
-      domtoimage.toPng(captureDiv).then((dataUrl: string) => {
-        const downloadLink = document.createElement("a");
-        downloadLink.href = dataUrl;
-        downloadLink.download = fileName;
-        // Trigger a click event to initiate the download
-        downloadLink.click();
+      domtoimage
+        .toPng(captureDiv, {
+          height: captureDiv.offsetHeight * 2,
+          width: captureDiv.offsetWidth * 2,
+          style: {
+            transform: `scale(${2})`,
+            transformOrigin: "top left",
+            width: `${captureDiv.offsetWidth}px`,
+            height: `${captureDiv.offsetHeight}px`,
+          },
+        })
+        .then((dataUrl: string) => {
+          const downloadLink = document.createElement("a");
+          downloadLink.href = changeDpiDataUrl(dataUrl, 300);
+          downloadLink.download = fileName;
+          // Trigger a click event to initiate the download
+          downloadLink.click();
 
-        // Clean up the object URL after the download
-        URL.revokeObjectURL(downloadLink.href);
-      });
+          // Clean up the object URL after the download
+          URL.revokeObjectURL(downloadLink.href);
+        });
     }
   }
 
@@ -175,17 +186,16 @@ const QrLabel = React.forwardRef<HTMLDivElement, QrLabelProps>((props, ref) => {
       className="flex h-auto max-w-[244px] flex-col justify-center gap-3 rounded-md border-[5px] border-[#E3E4E8] bg-white px-3 py-[17px]"
       ref={ref}
     >
-      <div className="z-50 max-w-full truncate  text-center text-[12px]">
+      <div className="z-50 max-w-full truncate  text-center text-[12px] font-semibold text-black">
         {title}
       </div>
       <figure className="qr-code z-[49] flex justify-center">
         <img src={data.qr.src} alt={`${data.qr.size}-shelf-qr-code.png`} />
       </figure>
       <div className="w-full text-center text-[12px]">
-        <span className="block  text-gray-600">{data.qr.id}</span>
-        <span className="block text-gray-500">
-          Powered by{" "}
-          <span className="font-semibold text-gray-600">shelf.nu</span>
+        <span className="block  font-semibold text-black">{data.qr.id}</span>
+        <span className="block text-black">
+          Powered by <span className="font-semibold text-black">shelf.nu</span>
         </span>
       </div>
     </div>
diff --git a/global.d.ts b/global.d.ts
new file mode 100644
index 000000000..bc452bc47
--- /dev/null
+++ b/global.d.ts
@@ -0,0 +1,3 @@
+// declare the modules with missing types declarations here
+
+declare module "changedpi";
diff --git a/package-lock.json b/package-lock.json
index 2e9c5e761..47908d3be 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -30,6 +30,7 @@
         "@stripe/stripe-js": "^1.54.2",
         "@supabase/supabase-js": "^2.26.0",
         "@zxing/library": "^0.20.0",
+        "changedpi": "^1.0.4",
         "cookie": "^0.5.0",
         "crisp-sdk-web": "^1.0.19",
         "csv-parse": "^5.4.0",
@@ -6737,6 +6738,11 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/changedpi": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/changedpi/-/changedpi-1.0.4.tgz",
+      "integrity": "sha512-9r6MNQrbg+cFURvEy10wo9Q35PD5GVj2GvXCbUYv8mU0Uf/NbkR7KlzMrjT4Ycd8a2nxApFJXQX2lTOPRFyG2g=="
+    },
     "node_modules/character-entities": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-2.0.2.tgz",
diff --git a/package.json b/package.json
index 4464bfd5b..1e6ef534f 100644
--- a/package.json
+++ b/package.json
@@ -54,6 +54,7 @@
     "@stripe/stripe-js": "^1.54.2",
     "@supabase/supabase-js": "^2.26.0",
     "@zxing/library": "^0.20.0",
+    "changedpi": "^1.0.4",
     "cookie": "^0.5.0",
     "crisp-sdk-web": "^1.0.19",
     "csv-parse": "^5.4.0",