@slithy/prim-interface 0.4.3 → 0.5.0

package/README.md

@@ -113,9 +113,9 @@ interface StepResult {
 
 Higher-level (rasterize SVG at save time for crisp output):
 
-- **`saveRasterFromVector(svgString, width, height, format?, quality?, options?)`** — downloads PNG or JPEG rasterized from the SVG
-- **`copyRasterFromVector(svgString, width, height)`** — copies a PNG rasterized from the SVG to the clipboard
-- **`shareFromVector(svgString, width, height, options?)`** — shares a PNG rasterized from the SVG via the Web Share API
+- **`saveRasterFromVector(svgString, width, height, format?, quality?, options?, background?)`** — downloads PNG or JPEG rasterized from the SVG. `background` fills the canvas before drawing: JPEG defaults to `'white'` (prevents black transparent areas); PNG defaults to transparent. Pass a `Background` value to override.
+- **`copyRasterFromVector(svgString, width, height)`** — copies a transparent PNG rasterized from the SVG to the clipboard
+- **`shareFromVector(svgString, width, height, options?)`** — shares a transparent PNG rasterized from the SVG via the Web Share API
 
 Lower-level (operate directly on a canvas or SVG string):
 
@@ -154,4 +154,12 @@ const { raster, svg, svgString } = replayOutput(serializedData);
 
 **Functions:** `stepPerf`, `replayOutput`
 
-**Types:** `RGB`, `SerializedOutput`, `StepData`, `ReplayResult`, `ShapeInterface`, `Bbox`
+**Types:** `RGB`, `SerializedOutput`, `StepData`, `ReplayResult`, `ShapeInterface`, `Bbox`, `Background`
+
+`Background` controls the canvas fill for `saveRasterFromVector`:
+
+```ts
+type Background = string | [png: string, jpeg: string]
+```
+
+Pass a CSS color string to use the same background for all formats, or a tuple to set PNG and JPEG fills independently.

package/dist/index.d.ts

@@ -51,8 +51,9 @@ interface SaveOptions {
     suffix?: string;
     filename?: string;
 }
+type Background = string | [png: string, jpeg: string];
 declare function saveRaster(canvas: HTMLCanvasElement, format?: 'png' | 'jpeg', quality?: number, options?: SaveOptions): void;
-declare function saveRasterFromVector(svgString: string, width: number, height: number, format?: 'png' | 'jpeg', quality?: number, options?: SaveOptions): Promise<void>;
+declare function saveRasterFromVector(svgString: string, width: number, height: number, format?: 'png' | 'jpeg', quality?: number, options?: SaveOptions, background?: Background): Promise<void>;
 declare function copyRasterFromVector(svgString: string, width: number, height: number): Promise<void>;
 declare function shareFromVector(svgString: string, width: number, height: number, options?: SaveOptions): Promise<void>;
 declare function saveVector(svgString: string, options?: SaveOptions): void;
@@ -60,4 +61,4 @@ declare function copyVector(svgString: string): Promise<void>;
 declare function copyRaster(canvas: HTMLCanvasElement): Promise<void>;
 declare function share(canvas: HTMLCanvasElement, options?: SaveOptions): Promise<void>;
 
-export { type Config, type JobHandle, type RunCallbacks, type SaveOptions, type StepResult, copyRaster, copyRasterFromVector, copyVector, run, runWorker, saveRaster, saveRasterFromVector, saveVector, share, shareFromVector };
+export { type Background, type Config, type JobHandle, type RunCallbacks, type SaveOptions, type StepResult, copyRaster, copyRasterFromVector, copyVector, run, runWorker, saveRaster, saveRasterFromVector, saveVector, share, shareFromVector };

package/dist/index.js

@@ -161,6 +161,11 @@ function runWorker(source, cfg, callbacks = {}) {
 }
 
 // src/exit.ts
+function resolveBackground(background, format) {
+  if (background === void 0) return format === "jpeg" ? "white" : void 0;
+  if (Array.isArray(background)) return format === "png" ? background[0] : background[1];
+  return background;
+}
 function buildFilename(ext, options) {
   const suffix = options?.suffix ?? "prim";
   const name = options?.filename ?? "output";
@@ -172,7 +177,7 @@ function triggerDownload(url, filename) {
   a.download = filename;
   a.click();
 }
-function svgToCanvas(svgString, width, height) {
+function svgToCanvas(svgString, width, height, background) {
   return new Promise((resolve, reject) => {
     const sized = svgString.replace(/(<svg[^>]*\s)width="[^"]*"/, `$1width="${width}"`).replace(/(<svg[^>]*\s)height="[^"]*"/, `$1height="${height}"`);
     const blob = new Blob([sized], { type: "image/svg+xml" });
@@ -182,7 +187,12 @@ function svgToCanvas(svgString, width, height) {
       const canvas = document.createElement("canvas");
       canvas.width = width;
       canvas.height = height;
-      canvas.getContext("2d").drawImage(img, 0, 0, width, height);
+      const ctx = canvas.getContext("2d");
+      if (background !== void 0) {
+        ctx.fillStyle = background;
+        ctx.fillRect(0, 0, width, height);
+      }
+      ctx.drawImage(img, 0, 0, width, height);
       URL.revokeObjectURL(url);
       resolve(canvas);
     };
@@ -199,8 +209,8 @@ function saveRaster(canvas, format = "png", quality = 0.92, options) {
   const dataUrl = canvas.toDataURL(mimeType, quality);
   triggerDownload(dataUrl, buildFilename(ext, options));
 }
-async function saveRasterFromVector(svgString, width, height, format = "png", quality = 0.92, options) {
-  const canvas = await svgToCanvas(svgString, width, height);
+async function saveRasterFromVector(svgString, width, height, format = "png", quality = 0.92, options, background) {
+  const canvas = await svgToCanvas(svgString, width, height, resolveBackground(background, format));
   saveRaster(canvas, format, quality, options);
 }
 async function copyRasterFromVector(svgString, width, height) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slithy/prim-interface",
-  "version": "0.4.3",
+  "version": "0.5.0",
   "description": "Browser-facing API for primitive-based image reconstruction.",
   "type": "module",
   "exports": {