Skip to content

Commit

Permalink
fixed text pixelation issue on downloaded qr labels
Browse files Browse the repository at this point in the history
  • Loading branch information
hunar1312 committed Oct 23, 2023
1 parent 78b66cb commit efefbfe
Show file tree
Hide file tree
Showing 4 changed files with 35 additions and 15 deletions.
40 changes: 25 additions & 15 deletions app/routes/_layout+/assets.$assetId.qr.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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) {
Expand Down Expand Up @@ -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);
});
}
}

Expand Down Expand Up @@ -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>
Expand Down
3 changes: 3 additions & 0 deletions global.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
// declare the modules with missing types declarations here

declare module "changedpi";
6 changes: 6 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down

0 comments on commit efefbfe

Please sign in to comment.