@7365admin1/layer-common 4.100.0 → 4.101.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @iservice365/layer-common
 
+## 4.101.0
+
+### Minor Changes
+
+- c52ce75: Vehicle QR stickers: also save as JPEG (300/600 dpi, real size, white background); the image menu now offers PNG or JPEG.
+
 ## 4.100.0
 
 ### Minor Changes

package/components/VehicleQrStickerDialog.vue

@@ -144,8 +144,9 @@
           </v-alert>
           <v-alert type="info" variant="tonal" density="compact" class="mt-2" data-test="vehicle-qr-save-guide">
             To print the same stickers again later: <b>Save sheet file</b> keeps this exact sheet on your computer - open
-            it any time and print (at 100%). <b>Save as PNG</b> gives one picture per sticker (300 or 600 dpi, real size),
-            e.g. for a print shop; several stickers come in one ZIP file. You can also come back to Vehicles any time and
+            it any time and print (at 100%). <b>Save as image</b> gives one PNG or JPEG picture per sticker (300 or 600 dpi,
+            real size), e.g. for a print shop; several stickers come in one ZIP file. PNG keeps the outside of a shaped
+            sticker see-through; JPEG puts it on white. You can also come back to Vehicles any time and
             print again - a vehicle keeps the same QR code until it is regenerated.
           </v-alert>
           <iframe ref="frame" title="Sticker sheet preview" :srcdoc="docHtml" class="sticker-preview mt-3" />
@@ -168,13 +169,14 @@
           <v-menu location="top">
             <template #activator="{ props: menu }">
               <v-btn v-bind="menu" variant="tonal" class="text-none" prepend-icon="mdi-file-image"
-                :disabled="!ticked.length || !docHtml" :loading="savingPng" data-test="vehicle-qr-save-png">
-                Save as PNG
+                :disabled="!ticked.length || !docHtml" :loading="savingImage" data-test="vehicle-qr-save-image">
+                Save as image
               </v-btn>
             </template>
             <v-list density="compact">
-              <v-list-item v-for="d in [300, 600]" :key="d" :title="`${d} dpi${d === 600 ? ' (sharpest)' : ''}`"
-                :data-test="`vehicle-qr-png-${d}`" @click="savePng(d)" />
+              <v-list-item v-for="o in IMAGE_CHOICES" :key="o.format + o.dpi"
+                :title="`${o.format.toUpperCase()} - ${o.dpi} dpi${o.dpi === 600 ? ' (sharpest)' : ''}`"
+                :data-test="`vehicle-qr-${o.format}-${o.dpi}`" @click="saveImages(o.format, o.dpi)" />
             </v-list>
           </v-menu>
         </template>
@@ -191,7 +193,7 @@
 import QRCode from "qrcode";
 import useVehicle from "../composables/useVehicle";
 import { errorConverter } from "../utils/data";
-import { pngWithDpi, saveFile, stickerBundleName, stickerFileNames, svgToPng, zipFiles } from "../utils/vehicle-qr-export";
+import { saveFile, stickerBundleName, stickerFileNames, svgToImage, zipFiles, type ImageFormat } from "../utils/vehicle-qr-export";
 import {
   STICKER_MAX_PER_REQUEST,
   buildStickerDocument,
@@ -423,26 +425,33 @@ function saveSheet() {
   saveFile(`${stickerBundleName(siteName.value)}.html`, docHtml.value, "text/html");
 }
 
-const savingPng = ref(false);
-/** One PNG per sticker at real size; more than one come in a ZIP. */
-async function savePng(dpi: number) {
+const IMAGE_CHOICES: { format: ImageFormat; dpi: number }[] = [
+  { format: "png", dpi: 300 },
+  { format: "png", dpi: 600 },
+  { format: "jpeg", dpi: 300 },
+  { format: "jpeg", dpi: 600 },
+];
+const savingImage = ref(false);
+/** One PNG or JPEG per sticker at real size; more than one come in a ZIP. */
+async function saveImages(format: ImageFormat, dpi: number) {
   const chosen = chosenItems();
   if (!chosen.length) return;
-  savingPng.value = true;
+  savingImage.value = true;
   error.value = "";
   try {
     const [faces, opts] = faceArgs(chosen);
     const cards = stickerCardSvgs(chosen, faces, { ...opts, dpi });
-    const names = stickerFileNames(chosen.map((i) => i.plateNumber));
+    const ext = format === "jpeg" ? "jpg" : "png";
+    const names = stickerFileNames(chosen.map((i) => i.plateNumber), ext);
     const files = [];
-    for (const [k, c] of cards.entries()) files.push({ name: names[k], data: pngWithDpi(await svgToPng(c.svg, c.width, c.height), dpi) });
-    if (files.length === 1) saveFile(files[0].name, files[0].data, "image/png");
+    for (const [k, c] of cards.entries()) files.push({ name: names[k], data: await svgToImage(c.svg, c.width, c.height, format, dpi) });
+    if (files.length === 1) saveFile(files[0].name, files[0].data, `image/${format}`);
     else saveFile(`${stickerBundleName(siteName.value)}.zip`, zipFiles(files), "application/zip");
   } catch (e: any) {
     console.error(e);
-    error.value = "The PNG files could not be made in this browser - use Save sheet file instead, or try Chrome or Edge.";
+    error.value = "The pictures could not be made in this browser - use Save sheet file instead, or try Chrome or Edge.";
   } finally {
-    savingPng.value = false;
+    savingImage.value = false;
   }
 }
 

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "4.100.0",
+  "version": "4.101.0",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "//files": "What a consumer extending this layer actually loads. Without this npm ships the whole working tree - the changesets, the CI workflows, the render harness in tools/ and any scratch directory that happened to exist at publish time. Nuxt resolves a layer by directory, so every runtime directory below has to stay listed; adding a new top-level runtime directory means adding it here too.",

package/utils/vehicle-qr-export.ts

@@ -1,8 +1,8 @@
 /**
- * Vehicle QR stickers - saving them as files (PNG images, a ZIP of PNGs, or the
+ * Vehicle QR stickers - saving them as files (PNG / JPEG images, a ZIP of them, or the
  * print sheet itself) so the same stickers can be printed again later.
  *
- * The byte work (PNG print size, ZIP) is pure so `node --test` can run it; the
+ * The byte work (PNG / JPEG print size, ZIP) is pure so `node --test` can run it; the
  * browser part (SVG -> canvas -> PNG, download) is at the bottom.
  */
 
@@ -41,6 +41,26 @@ export function pngWithDpi(png: Uint8Array, dpi: number): Uint8Array {
   return out;
 }
 
+/**
+ * Stamp the print size into a JPEG's JFIF header (dots per inch), adding the
+ * header when the encoder left it out.
+ */
+export function jpegWithDpi(jpeg: Uint8Array, dpi: number): Uint8Array {
+  const isJfif = jpeg[2] === 0xff && jpeg[3] === 0xe0 && String.fromCharCode(...jpeg.subarray(6, 11)) === "JFIF\0";
+  const out = isJfif ? jpeg.slice() : new Uint8Array(jpeg.length + 18);
+  if (!isJfif) {
+    out.set([0xff, 0xd8, 0xff, 0xe0, 0, 16, 0x4a, 0x46, 0x49, 0x46, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0]);
+    out.set(jpeg.subarray(2), 20);
+  }
+  const v = new DataView(out.buffer);
+  out[13] = 1; // unit: dots per inch
+  v.setUint16(14, dpi);
+  v.setUint16(16, dpi);
+  return out;
+}
+
+export type ImageFormat = "png" | "jpeg";
+
 /**
  * A plain ZIP (stored, no compression - PNGs are already compressed) that
  * Windows, macOS and phones open without extra software.
@@ -103,14 +123,14 @@ export function fileNamePart(value: unknown, fallback = "sticker"): string {
   return s || fallback;
 }
 
-/** One PNG name per sticker, by plate; the same plate twice gets -2, -3. */
-export function stickerFileNames(plates: unknown[]): string[] {
+/** One image name per sticker, by plate; the same plate twice gets -2, -3. */
+export function stickerFileNames(plates: unknown[], ext = "png"): string[] {
   const seen = new Map<string, number>();
   return plates.map((p) => {
     const base = fileNamePart(p).toUpperCase();
     const n = (seen.get(base) ?? 0) + 1;
     seen.set(base, n);
-    return `${base}${n > 1 ? `-${n}` : ""}.png`;
+    return `${base}${n > 1 ? `-${n}` : ""}.${ext}`;
   });
 }
 
@@ -122,8 +142,12 @@ export function stickerBundleName(siteName: unknown, when = new Date()): string
 
 // ---- browser only -------------------------------------------------------
 
-/** Draw an SVG image (sized in pixels) onto a canvas and return the PNG bytes. */
-export async function svgToPng(svg: string, width: number, height: number): Promise<Uint8Array> {
+/**
+ * Draw an SVG image (sized in pixels) onto a canvas and return the PNG or JPEG
+ * bytes with the print size stamped in. JPEG has no see-through, so it gets
+ * white paper behind the sticker; quality 0.95 keeps the QR edges clean.
+ */
+export async function svgToImage(svg: string, width: number, height: number, format: ImageFormat, dpi: number): Promise<Uint8Array> {
   const img = new Image();
   img.decoding = "sync";
   img.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
@@ -131,10 +155,16 @@ export async function svgToPng(svg: string, width: number, height: number): Prom
   const canvas = document.createElement("canvas");
   canvas.width = width;
   canvas.height = height;
-  canvas.getContext("2d")!.drawImage(img, 0, 0, width, height);
-  const blob = await new Promise<Blob | null>((ok) => canvas.toBlob(ok, "image/png"));
+  const ctx = canvas.getContext("2d")!;
+  if (format === "jpeg") {
+    ctx.fillStyle = "#fff";
+    ctx.fillRect(0, 0, width, height);
+  }
+  ctx.drawImage(img, 0, 0, width, height);
+  const blob = await new Promise<Blob | null>((ok) => canvas.toBlob(ok, `image/${format}`, 0.95));
   if (!blob) throw new Error("This browser could not make the picture.");
-  return new Uint8Array(await blob.arrayBuffer());
+  const bytes = new Uint8Array(await blob.arrayBuffer());
+  return format === "jpeg" ? jpegWithDpi(bytes, dpi) : pngWithDpi(bytes, dpi);
 }
 
 /** Hand the browser a file to save (it goes to the Downloads folder). */