fabricjs-document-engine 0.4.0 → 0.5.0

package/README.md

@@ -12,6 +12,7 @@ Fabric already draws objects, handles interaction and serializes to JSON. This p
 - **Your storage.** Plug in any backend with two functions, or use the built-in memory and localStorage adapters. No hosted service is needed.
 - **Assets and fonts.** Documents record the images and fonts they need. When a document is opened, every image and font is checked first. You get the exact list of what is missing, can offer replacements, and tab-only images are uploaded when you save.
 - **Recovery.** Unsaved work is copied to IndexedDB while the user edits, and again at the moment the tab is closed or refreshed. After a crash or refresh you can offer to restore it, including images that only existed in the old tab.
+- **Dependable export.** PNG, JPEG, WebP, SVG and editable JSON. You choose the area, scale and background. A preflight check means an export either succeeds or tells you exactly which image or font prevents it.
 - **Reliable undo and redo.** One user action is one undo step. Transactions group several code changes into one labelled step, and ids survive undo and redo.
 - **Fabric 6 and 7.** Every release is tested against both.
 
@@ -176,6 +177,47 @@ await engine.replaceImage('/old-logo.png', '/new-logo.png');
 
 `replaceImage` swaps every image that uses a URL. Each image keeps its size on the page, and the change is one undo step. `engine.getAssetManifest()` returns the manifest for the current canvas.
 
+## Export
+
+```ts
+import { downloadExport } from 'fabricjs-document-engine';
+
+const result = await engine.export({ format: 'png', scale: 2 });
+downloadExport(result, 'poster.png');
+```
+
+`result` is `{ format, mimeType, blob, width, height, warnings }`. JSON exports also include `document`.
+
+| Option | Values | Default |
+| --- | --- | --- |
+| `format` | `'png'`, `'jpeg'`, `'webp'`, `'svg'` or `'json'` | required |
+| `scale` | Output size multiplier, such as `2` for retina | `1` |
+| `quality` | 0 to 1, for JPEG and WebP | `0.92` |
+| `area` | `'canvas'`, `'content'` (every object), `'selection'`, or `{ left, top, width, height }` | `'canvas'` |
+| `padding` | Extra space around `content` or `selection` | `0` |
+| `background` | `'keep'`, `'transparent'` or any CSS color | `'keep'` |
+| `signal` | An `AbortSignal` to cancel | |
+
+- The current zoom and pan do not matter. Exports always use document coordinates, and the view is restored afterwards.
+- A JPEG has no transparency, so an empty or transparent background becomes white instead of black.
+- The export never changes the canvas, the history or the unsaved state.
+- A JSON export is the same portable document a save produces, including uploaded images when `assets.upload` is set.
+
+### Preflight and errors
+
+Before rendering, the engine checks the objects on the canvas:
+
+- **`MISSING_IMAGE`**: an image failed to load.
+- **`CROSS_ORIGIN_IMAGE`**: an image from another site without CORS would make the browser block a PNG, JPEG or WebP export. SVG and JSON are not affected.
+- **`MISSING_FONT`**: a font is not available and `assets.requireFonts` is on. Otherwise you get a `FONT_UNAVAILABLE` warning.
+
+If any problem is found, `export` rejects with `EXPORT_BLOCKED`, and `error.problems` lists each `{ code, message, url?, family?, objectIds }`. You can run the same check first to show it in your UI:
+
+```ts
+const check = await engine.preflightExport({ format: 'png' });
+if (!check.ok) showProblems(check.problems);
+```
+
 ## Recovery
 
 ```ts
@@ -311,6 +353,9 @@ Keep project data such as titles, owners and tags in `metadata` with `engine.upd
 | `engine.getAssetManifest()` | Lists the images and fonts used on the canvas. |
 | `engine.checkAssets()` | Resolves to `{ manifest, missingImages, unavailableFonts, warnings }` for the current canvas. |
 | `engine.replaceImage(oldUrl, newUrl)` | Replaces every image with that URL as one undo step. Resolves to the number of images replaced. |
+| `engine.export(options)` | Exports PNG, JPEG, WebP, SVG or JSON. See [Export](#export). |
+| `engine.preflightExport(options)` | Resolves to `{ ok, problems, warnings }` without exporting. |
+| `downloadExport(result, fileName?)` | Starts a browser download of an export result. |
 | `engine.getRecoverableDocuments()` | Lists recovery copies, newest first. |
 | `engine.restoreRecovery(id?)` / `engine.discardRecovery(id?)` | Loads or deletes a recovery copy. The default is the current document. |
 | `engine.getRecovery(id?)` / `engine.flushRecovery()` | Reads a copy, or writes one now. |
@@ -322,7 +367,7 @@ Keep project data such as titles, owners and tags in `metadata` with `engine.upd
 | `engine.getHistory()` | Returns `{ undo, redo }` label lists, newest first. |
 | `engine.clearHistory()` | Forgets all steps. Loading a document or starting a new one also does this. |
 | `bindKeyboardShortcuts(engine, { target? })` | Adds the undo and redo shortcuts. Returns an unbind function. |
-| `engine.on(event, handler)` | Listens to `load:start`, `load:success`, `load:error`, `save:start`, `save:success`, `save:error`, `save:retry`, `save:status`, `assets:warning`, `recovery:checkpoint`, `recovery:restored`, `recovery:error`, `history:change` or `history:error`. Returns an unsubscribe function. |
+| `engine.on(event, handler)` | Listens to `load:start`, `load:success`, `load:error`, `save:start`, `save:success`, `save:error`, `save:retry`, `save:status`, `assets:warning`, `recovery:checkpoint`, `recovery:restored`, `recovery:error`, `export:success`, `export:error`, `history:change` or `history:error`. Returns an unsubscribe function. |
 | `engine.destroy()` | Stops listening to the canvas and cancels a running load. |
 | `validateDocument(value)` | Returns a list of issues with the exact path of each problem. |
 
@@ -345,6 +390,10 @@ Every failure is a `DocumentEngineError` with a `code` you can switch on:
 | `SAVE_CANCELLED` | A queued save was dropped because another document was opened. |
 | `DOCUMENT_NOT_FOUND` | The built-in adapters have no document with that id. |
 | `HISTORY_FAILED` | Undo or redo could not rebuild an object, for example because an image is gone. The step is kept and the canvas is unchanged. |
+| `EXPORT_BLOCKED` | The preflight found problems. `error.problems` lists each one with the objects involved. |
+| `INVALID_EXPORT_OPTIONS` | The format, scale, quality, area or padding is not valid, or the area is empty. |
+| `EXPORT_ABORTED` | The export was cancelled with its `signal`. |
+| `EXPORT_FAILED` | Fabric could not render the export. `error.cause` holds the original error. |
 | `RECOVERY_MISSING` | A recovery method was called without `recovery: { store }`. |
 | `RECOVERY_NOT_FOUND` | There is no recovery copy for that document. |
 | `RECOVERY_FAILED` | Writing a recovery copy failed, for example because storage is full. It is delivered as a `recovery:error` event and never interrupts editing. |
@@ -363,7 +412,7 @@ A failed load never clears or half-fills your canvas.
 | 3 | Safe saving: dirty state, autosave, stale-response protection | 0.2.0 |
 | 4 | Assets and fonts | 0.3.0 |
 | 5 | Recovery after a refresh or crash | 0.4.0 |
-| 6 | PNG, JPEG, SVG and JSON export with preflight checks | |
+| 6 | PNG, JPEG, SVG and JSON export with preflight checks | 0.5.0 |
 | 7 | Named versions and schema migrations | |
 | 8 | React adapter and examples | |
 | 9 | Hardening and benchmarks | |

package/dist/engine/create-document-engine.cjs

@@ -2,13 +2,17 @@ const require_asset_manifest = require("../assets/asset-manifest.cjs");
 const require_errors = require("./errors.cjs");
 const require_image_check = require("../assets/image-check.cjs");
 const require_asset_pipeline = require("../assets/asset-pipeline.cjs");
+const require_export_area = require("../export/export-area.cjs");
+const require_export_options = require("../export/export-options.cjs");
+const require_object_ids = require("../fabric/object-ids.cjs");
+const require_walk_objects = require("../fabric/walk-objects.cjs");
+const require_preflight_export = require("../export/preflight-export.cjs");
+const require_render_export = require("../export/render-export.cjs");
 require("../document/document-format.cjs");
 const require_ids = require("../document/ids.cjs");
 const require_create_document = require("../document/create-document.cjs");
 const require_validate_document = require("../document/validate-document.cjs");
-const require_walk_objects = require("../fabric/walk-objects.cjs");
 const require_fabric_adapter = require("../fabric/fabric-adapter.cjs");
-const require_object_ids = require("../fabric/object-ids.cjs");
 const require_object_registry = require("../fabric/object-registry.cjs");
 const require_create_history = require("../history/create-history.cjs");
 const require_recovery_controller = require("../recovery/recovery-controller.cjs");
@@ -270,6 +274,92 @@ function createDocumentEngine(options) {
 		canvas.requestRenderAll();
 		return images.length;
 	}
+	function fontsOnCanvas() {
+		rebuildIndex();
+		return require_asset_manifest.buildAssetManifest(require_fabric_adapter.serializeCanvas(canvas, registry.propertiesToInclude()).objects).fonts;
+	}
+	async function checkBeforeExport(exportOptions) {
+		ensureUsable();
+		const { format } = require_export_options.normalizeExportOptions(exportOptions);
+		return require_preflight_export.preflightExport(canvas, format, format === "json" ? [] : fontsOnCanvas(), assetOptions);
+	}
+	function describeProblems(check) {
+		return check.problems.map((problem) => problem.message).join("; ");
+	}
+	async function exportContent(exportOptions) {
+		const settings = require_export_options.normalizeExportOptions(exportOptions);
+		const stopIfCancelled = () => {
+			if (settings.signal?.aborted) throw new require_errors.DocumentEngineError("EXPORT_ABORTED", "The export was cancelled");
+		};
+		stopIfCancelled();
+		if (settings.format === "json") {
+			const prepared = await require_asset_pipeline.prepareAssetsForSave(toDocument(), assetOptions, uploadedUrls);
+			stopIfCancelled();
+			return {
+				format: "json",
+				mimeType: require_render_export.mimeTypes.json,
+				blob: new Blob([JSON.stringify(prepared.document)], { type: require_render_export.mimeTypes.json }),
+				width: prepared.document.canvas.width,
+				height: prepared.document.canvas.height,
+				warnings: prepared.warnings,
+				document: prepared.document
+			};
+		}
+		const check = await checkBeforeExport(settings);
+		stopIfCancelled();
+		if (!check.ok) throw new require_errors.DocumentEngineError("EXPORT_BLOCKED", `The export cannot run: ${describeProblems(check)}`, { problems: check.problems });
+		const format = settings.format;
+		try {
+			const rendered = require_render_export.withExportView(canvas, settings.background, format, () => {
+				const area = require_export_area.resolveExportArea(canvas, settings.area, settings.padding);
+				return {
+					area,
+					content: format === "svg" ? require_render_export.renderSvg(canvas, area, settings.scale) : require_render_export.renderRaster(canvas, area, format, settings.scale, settings.quality)
+				};
+			});
+			const blob = format === "svg" ? new Blob([rendered.content], { type: require_render_export.mimeTypes.svg }) : require_render_export.dataUrlToBlob(rendered.content);
+			return {
+				format,
+				mimeType: blob.type || require_render_export.mimeTypes[format],
+				blob,
+				width: Math.round(rendered.area.width * settings.scale),
+				height: Math.round(rendered.area.height * settings.scale),
+				warnings: check.warnings
+			};
+		} catch (error) {
+			if (require_errors.isDocumentEngineError(error)) throw error;
+			if (error?.name === "SecurityError") {
+				const problem = {
+					code: "CROSS_ORIGIN_IMAGE",
+					message: "The browser blocked the export because the canvas shows an image from another site without CORS",
+					objectIds: []
+				};
+				throw new require_errors.DocumentEngineError("EXPORT_BLOCKED", problem.message, {
+					problems: [problem],
+					cause: error
+				});
+			}
+			const reason = error instanceof Error ? error.message : String(error);
+			throw new require_errors.DocumentEngineError("EXPORT_FAILED", `Fabric could not export the canvas: ${reason}`, { cause: error });
+		}
+	}
+	async function exportDocument(exportOptions) {
+		ensureUsable();
+		try {
+			const result = await exportContent(exportOptions);
+			events.emit("export:success", {
+				format: result.format,
+				width: result.width,
+				height: result.height,
+				warnings: result.warnings
+			});
+			return result;
+		} catch (error) {
+			const engineError = require_errors.isDocumentEngineError(error) ? error : new require_errors.DocumentEngineError("EXPORT_FAILED", String(error), { cause: error });
+			events.emit("export:error", { error: engineError });
+			throw engineError;
+		}
+	}
 	function requireRecovery() {
 		ensureUsable();
 		if (!recovery) throw new require_errors.DocumentEngineError("RECOVERY_MISSING", "Pass recovery: { store } to createDocumentEngine to use recovery");
@@ -343,6 +433,8 @@ function createDocumentEngine(options) {
 		},
 		checkAssets,
 		replaceImage,
+		export: exportDocument,
+		preflightExport: checkBeforeExport,
 		flushRecovery: async () => requireRecovery().flush(),
 		getRecoverableDocuments: async () => requireRecovery().list(),
 		getRecovery: async (documentId) => requireRecovery().read(documentId ?? documentInfo.id),

package/dist/engine/create-document-engine.d.cts

@@ -1,6 +1,8 @@
 import { DocumentInfo, FabricDocument } from "../document/document-format.cjs";
 import { AssetManifest } from "../assets/asset-manifest.cjs";
 import { AssetOptions, AssetReport, AssetWarning } from "../assets/asset-pipeline.cjs";
+import { ExportFormat, ExportOptions } from "../export/export-options.cjs";
+import { ExportPreflight } from "../export/preflight-export.cjs";
 import { NewDocumentOptions } from "../document/create-document.cjs";
 import { CustomObjectDefinition } from "../fabric/object-registry.cjs";
 import { HistoryOptions, HistoryState } from "../history/create-history.cjs";
@@ -27,6 +29,15 @@ export interface DocumentEngineOptions {
 export interface LoadOptions {
   restoreCanvasSize?: boolean;
 }
+export interface ExportResult {
+  format: ExportFormat;
+  mimeType: string;
+  blob: Blob;
+  width: number;
+  height: number;
+  warnings: AssetWarning[];
+  document?: FabricDocument;
+}
 export interface DocumentEngineEvents {
   "load:start": {
     documentId: string | undefined;
@@ -66,6 +77,15 @@ export interface DocumentEngineEvents {
   "recovery:error": {
     error: DocumentEngineError;
   };
+  "export:success": {
+    format: ExportFormat;
+    width: number;
+    height: number;
+    warnings: AssetWarning[];
+  };
+  "export:error": {
+    error: DocumentEngineError;
+  };
 }
 export interface DocumentEngine {
   readonly canvas: StaticCanvas;
@@ -94,6 +114,8 @@ export interface DocumentEngine {
   getAssetManifest(): AssetManifest;
   checkAssets(): Promise<AssetReport>;
   replaceImage(oldUrl: string, newUrl: string): Promise<number>;
+  export(options: ExportOptions): Promise<ExportResult>;
+  preflightExport(options: ExportOptions): Promise<ExportPreflight>;
   flushRecovery(): Promise<void>;
   getRecoverableDocuments(): Promise<RecoveryRecord[]>;
   getRecovery(documentId?: string): Promise<RecoveryRecord | undefined>;

package/dist/engine/create-document-engine.d.ts

@@ -1,6 +1,8 @@
 import { DocumentInfo, FabricDocument } from "../document/document-format.js";
 import { AssetManifest } from "../assets/asset-manifest.js";
 import { AssetOptions, AssetReport, AssetWarning } from "../assets/asset-pipeline.js";
+import { ExportFormat, ExportOptions } from "../export/export-options.js";
+import { ExportPreflight } from "../export/preflight-export.js";
 import { NewDocumentOptions } from "../document/create-document.js";
 import { CustomObjectDefinition } from "../fabric/object-registry.js";
 import { HistoryOptions, HistoryState } from "../history/create-history.js";
@@ -27,6 +29,15 @@ export interface DocumentEngineOptions {
 export interface LoadOptions {
   restoreCanvasSize?: boolean;
 }
+export interface ExportResult {
+  format: ExportFormat;
+  mimeType: string;
+  blob: Blob;
+  width: number;
+  height: number;
+  warnings: AssetWarning[];
+  document?: FabricDocument;
+}
 export interface DocumentEngineEvents {
   "load:start": {
     documentId: string | undefined;
@@ -66,6 +77,15 @@ export interface DocumentEngineEvents {
   "recovery:error": {
     error: DocumentEngineError;
   };
+  "export:success": {
+    format: ExportFormat;
+    width: number;
+    height: number;
+    warnings: AssetWarning[];
+  };
+  "export:error": {
+    error: DocumentEngineError;
+  };
 }
 export interface DocumentEngine {
   readonly canvas: StaticCanvas;
@@ -94,6 +114,8 @@ export interface DocumentEngine {
   getAssetManifest(): AssetManifest;
   checkAssets(): Promise<AssetReport>;
   replaceImage(oldUrl: string, newUrl: string): Promise<number>;
+  export(options: ExportOptions): Promise<ExportResult>;
+  preflightExport(options: ExportOptions): Promise<ExportPreflight>;
   flushRecovery(): Promise<void>;
   getRecoverableDocuments(): Promise<RecoveryRecord[]>;
   getRecovery(documentId?: string): Promise<RecoveryRecord | undefined>;

package/dist/engine/create-document-engine.js

@@ -2,13 +2,17 @@ import { buildAssetManifest } from "../assets/asset-manifest.js";
 import { DocumentEngineError, isDocumentEngineError } from "./errors.js";
 import { isSameUrl } from "../assets/image-check.js";
 import { inspectAssets, prepareAssetsForLoad, prepareAssetsForSave } from "../assets/asset-pipeline.js";
+import { resolveExportArea } from "../export/export-area.js";
+import { normalizeExportOptions } from "../export/export-options.js";
+import { readObjectId, writeObjectId } from "../fabric/object-ids.js";
+import { collectSerializedTypes, walkObjects } from "../fabric/walk-objects.js";
+import { preflightExport } from "../export/preflight-export.js";
+import { dataUrlToBlob, mimeTypes, renderRaster, renderSvg, withExportView } from "../export/render-export.js";
 import "../document/document-format.js";
 import { createId } from "../document/ids.js";
 import { createDocumentInfo } from "../document/create-document.js";
 import { validateDocument } from "../document/validate-document.js";
-import { collectSerializedTypes, walkObjects } from "../fabric/walk-objects.js";
 import { loadIntoCanvas, serializeCanvas } from "../fabric/fabric-adapter.js";
-import { readObjectId, writeObjectId } from "../fabric/object-ids.js";
 import { createObjectRegistry } from "../fabric/object-registry.js";
 import { createHistory } from "../history/create-history.js";
 import { createRecoveryController, restoreRecordedFiles } from "../recovery/recovery-controller.js";
@@ -270,6 +274,92 @@ function createDocumentEngine(options) {
 		canvas.requestRenderAll();
 		return images.length;
 	}
+	function fontsOnCanvas() {
+		rebuildIndex();
+		return buildAssetManifest(serializeCanvas(canvas, registry.propertiesToInclude()).objects).fonts;
+	}
+	async function checkBeforeExport(exportOptions) {
+		ensureUsable();
+		const { format } = normalizeExportOptions(exportOptions);
+		return preflightExport(canvas, format, format === "json" ? [] : fontsOnCanvas(), assetOptions);
+	}
+	function describeProblems(check) {
+		return check.problems.map((problem) => problem.message).join("; ");
+	}
+	async function exportContent(exportOptions) {
+		const settings = normalizeExportOptions(exportOptions);
+		const stopIfCancelled = () => {
+			if (settings.signal?.aborted) throw new DocumentEngineError("EXPORT_ABORTED", "The export was cancelled");
+		};
+		stopIfCancelled();
+		if (settings.format === "json") {
+			const prepared = await prepareAssetsForSave(toDocument(), assetOptions, uploadedUrls);
+			stopIfCancelled();
+			return {
+				format: "json",
+				mimeType: mimeTypes.json,
+				blob: new Blob([JSON.stringify(prepared.document)], { type: mimeTypes.json }),
+				width: prepared.document.canvas.width,
+				height: prepared.document.canvas.height,
+				warnings: prepared.warnings,
+				document: prepared.document
+			};
+		}
+		const check = await checkBeforeExport(settings);
+		stopIfCancelled();
+		if (!check.ok) throw new DocumentEngineError("EXPORT_BLOCKED", `The export cannot run: ${describeProblems(check)}`, { problems: check.problems });
+		const format = settings.format;
+		try {
+			const rendered = withExportView(canvas, settings.background, format, () => {
+				const area = resolveExportArea(canvas, settings.area, settings.padding);
+				return {
+					area,
+					content: format === "svg" ? renderSvg(canvas, area, settings.scale) : renderRaster(canvas, area, format, settings.scale, settings.quality)
+				};
+			});
+			const blob = format === "svg" ? new Blob([rendered.content], { type: mimeTypes.svg }) : dataUrlToBlob(rendered.content);
+			return {
+				format,
+				mimeType: blob.type || mimeTypes[format],
+				blob,
+				width: Math.round(rendered.area.width * settings.scale),
+				height: Math.round(rendered.area.height * settings.scale),
+				warnings: check.warnings
+			};
+		} catch (error) {
+			if (isDocumentEngineError(error)) throw error;
+			if (error?.name === "SecurityError") {
+				const problem = {
+					code: "CROSS_ORIGIN_IMAGE",
+					message: "The browser blocked the export because the canvas shows an image from another site without CORS",
+					objectIds: []
+				};
+				throw new DocumentEngineError("EXPORT_BLOCKED", problem.message, {
+					problems: [problem],
+					cause: error
+				});
+			}
+			const reason = error instanceof Error ? error.message : String(error);
+			throw new DocumentEngineError("EXPORT_FAILED", `Fabric could not export the canvas: ${reason}`, { cause: error });
+		}
+	}
+	async function exportDocument(exportOptions) {
+		ensureUsable();
+		try {
+			const result = await exportContent(exportOptions);
+			events.emit("export:success", {
+				format: result.format,
+				width: result.width,
+				height: result.height,
+				warnings: result.warnings
+			});
+			return result;
+		} catch (error) {
+			const engineError = isDocumentEngineError(error) ? error : new DocumentEngineError("EXPORT_FAILED", String(error), { cause: error });
+			events.emit("export:error", { error: engineError });
+			throw engineError;
+		}
+	}
 	function requireRecovery() {
 		ensureUsable();
 		if (!recovery) throw new DocumentEngineError("RECOVERY_MISSING", "Pass recovery: { store } to createDocumentEngine to use recovery");
@@ -343,6 +433,8 @@ function createDocumentEngine(options) {
 		},
 		checkAssets,
 		replaceImage,
+		export: exportDocument,
+		preflightExport: checkBeforeExport,
 		flushRecovery: async () => requireRecovery().flush(),
 		getRecoverableDocuments: async () => requireRecovery().list(),
 		getRecovery: async (documentId) => requireRecovery().read(documentId ?? documentInfo.id),

package/dist/engine/errors.cjs

@@ -8,6 +8,7 @@ var DocumentEngineError = class extends Error {
 		this.unknownTypes = details.unknownTypes ?? [];
 		this.missingAssets = details.missingAssets ?? [];
 		this.missingFonts = details.missingFonts ?? [];
+		this.problems = details.problems ?? [];
 		this.cause = details.cause;
 		this.retryable = details.retryable ?? false;
 	}

package/dist/engine/errors.d.cts

@@ -1,6 +1,7 @@
 import { FontAsset, ImageAsset } from "../assets/asset-manifest.cjs";
+import { ExportProblem } from "../export/preflight-export.cjs";
 //#region src/engine/errors.d.ts
-export type DocumentErrorCode = "INVALID_DOCUMENT" | "UNSUPPORTED_SCHEMA" | "UNKNOWN_OBJECT_TYPE" | "INVALID_CUSTOM_OBJECT" | "LOAD_ABORTED" | "LOAD_FAILED" | "MISSING_ASSETS" | "MISSING_FONTS" | "ASSET_UPLOAD_FAILED" | "STORAGE_MISSING" | "SAVE_FAILED" | "SAVE_CONFLICT" | "SAVE_CANCELLED" | "DOCUMENT_NOT_FOUND" | "HISTORY_FAILED" | "RECOVERY_MISSING" | "RECOVERY_NOT_FOUND" | "RECOVERY_FAILED" | "ENGINE_DESTROYED";
+export type DocumentErrorCode = "INVALID_DOCUMENT" | "UNSUPPORTED_SCHEMA" | "UNKNOWN_OBJECT_TYPE" | "INVALID_CUSTOM_OBJECT" | "LOAD_ABORTED" | "LOAD_FAILED" | "MISSING_ASSETS" | "MISSING_FONTS" | "ASSET_UPLOAD_FAILED" | "STORAGE_MISSING" | "SAVE_FAILED" | "SAVE_CONFLICT" | "SAVE_CANCELLED" | "DOCUMENT_NOT_FOUND" | "HISTORY_FAILED" | "RECOVERY_MISSING" | "RECOVERY_NOT_FOUND" | "RECOVERY_FAILED" | "INVALID_EXPORT_OPTIONS" | "EXPORT_BLOCKED" | "EXPORT_FAILED" | "EXPORT_ABORTED" | "ENGINE_DESTROYED";
 export interface DocumentIssue {
   code: DocumentErrorCode;
   path: string;
@@ -11,6 +12,7 @@ export interface DocumentEngineErrorDetails {
   unknownTypes?: string[];
   missingAssets?: ImageAsset[];
   missingFonts?: FontAsset[];
+  problems?: ExportProblem[];
   cause?: unknown;
   retryable?: boolean;
 }
@@ -20,6 +22,7 @@ export declare class DocumentEngineError extends Error {
   readonly unknownTypes: string[];
   readonly missingAssets: ImageAsset[];
   readonly missingFonts: FontAsset[];
+  readonly problems: ExportProblem[];
   readonly cause: unknown;
   readonly retryable: boolean;
   constructor(code: DocumentErrorCode, message: string, details?: DocumentEngineErrorDetails);

package/dist/engine/errors.d.ts

@@ -1,6 +1,7 @@
 import { FontAsset, ImageAsset } from "../assets/asset-manifest.js";
+import { ExportProblem } from "../export/preflight-export.js";
 //#region src/engine/errors.d.ts
-export type DocumentErrorCode = "INVALID_DOCUMENT" | "UNSUPPORTED_SCHEMA" | "UNKNOWN_OBJECT_TYPE" | "INVALID_CUSTOM_OBJECT" | "LOAD_ABORTED" | "LOAD_FAILED" | "MISSING_ASSETS" | "MISSING_FONTS" | "ASSET_UPLOAD_FAILED" | "STORAGE_MISSING" | "SAVE_FAILED" | "SAVE_CONFLICT" | "SAVE_CANCELLED" | "DOCUMENT_NOT_FOUND" | "HISTORY_FAILED" | "RECOVERY_MISSING" | "RECOVERY_NOT_FOUND" | "RECOVERY_FAILED" | "ENGINE_DESTROYED";
+export type DocumentErrorCode = "INVALID_DOCUMENT" | "UNSUPPORTED_SCHEMA" | "UNKNOWN_OBJECT_TYPE" | "INVALID_CUSTOM_OBJECT" | "LOAD_ABORTED" | "LOAD_FAILED" | "MISSING_ASSETS" | "MISSING_FONTS" | "ASSET_UPLOAD_FAILED" | "STORAGE_MISSING" | "SAVE_FAILED" | "SAVE_CONFLICT" | "SAVE_CANCELLED" | "DOCUMENT_NOT_FOUND" | "HISTORY_FAILED" | "RECOVERY_MISSING" | "RECOVERY_NOT_FOUND" | "RECOVERY_FAILED" | "INVALID_EXPORT_OPTIONS" | "EXPORT_BLOCKED" | "EXPORT_FAILED" | "EXPORT_ABORTED" | "ENGINE_DESTROYED";
 export interface DocumentIssue {
   code: DocumentErrorCode;
   path: string;
@@ -11,6 +12,7 @@ export interface DocumentEngineErrorDetails {
   unknownTypes?: string[];
   missingAssets?: ImageAsset[];
   missingFonts?: FontAsset[];
+  problems?: ExportProblem[];
   cause?: unknown;
   retryable?: boolean;
 }
@@ -20,6 +22,7 @@ export declare class DocumentEngineError extends Error {
   readonly unknownTypes: string[];
   readonly missingAssets: ImageAsset[];
   readonly missingFonts: FontAsset[];
+  readonly problems: ExportProblem[];
   readonly cause: unknown;
   readonly retryable: boolean;
   constructor(code: DocumentErrorCode, message: string, details?: DocumentEngineErrorDetails);

package/dist/engine/errors.js

@@ -8,6 +8,7 @@ var DocumentEngineError = class extends Error {
 		this.unknownTypes = details.unknownTypes ?? [];
 		this.missingAssets = details.missingAssets ?? [];
 		this.missingFonts = details.missingFonts ?? [];
+		this.problems = details.problems ?? [];
 		this.cause = details.cause;
 		this.retryable = details.retryable ?? false;
 	}

package/dist/export/download-export.cjs

@@ -0,0 +1,14 @@
+//#region src/export/download-export.ts
+function downloadExport(result, fileName = `document.${result.format === "jpeg" ? "jpg" : result.format}`) {
+	const url = URL.createObjectURL(result.blob);
+	const link = document.createElement("a");
+	link.href = url;
+	link.download = fileName;
+	link.style.display = "none";
+	document.body.append(link);
+	link.click();
+	link.remove();
+	setTimeout(() => URL.revokeObjectURL(url), 0);
+}
+//#endregion
+exports.downloadExport = downloadExport;

package/dist/export/download-export.d.cts

@@ -0,0 +1,7 @@
+//#region src/export/download-export.d.ts
+export interface DownloadableExport {
+  blob: Blob;
+  format: string;
+}
+export declare function downloadExport(result: DownloadableExport, fileName?: string): void;
+//#endregion

package/dist/export/download-export.d.ts

@@ -0,0 +1,7 @@
+//#region src/export/download-export.d.ts
+export interface DownloadableExport {
+  blob: Blob;
+  format: string;
+}
+export declare function downloadExport(result: DownloadableExport, fileName?: string): void;
+//#endregion

package/dist/export/download-export.js

@@ -0,0 +1,14 @@
+//#region src/export/download-export.ts
+function downloadExport(result, fileName = `document.${result.format === "jpeg" ? "jpg" : result.format}`) {
+	const url = URL.createObjectURL(result.blob);
+	const link = document.createElement("a");
+	link.href = url;
+	link.download = fileName;
+	link.style.display = "none";
+	document.body.append(link);
+	link.click();
+	link.remove();
+	setTimeout(() => URL.revokeObjectURL(url), 0);
+}
+//#endregion
+export { downloadExport };

package/dist/export/export-area.cjs

@@ -0,0 +1,46 @@
+const require_errors = require("../engine/errors.cjs");
+//#region src/export/export-area.ts
+function boundsOf(objects) {
+	if (objects.length === 0) return null;
+	let left = Infinity;
+	let top = Infinity;
+	let right = -Infinity;
+	let bottom = -Infinity;
+	for (const object of objects) {
+		const box = object.getBoundingRect();
+		left = Math.min(left, box.left);
+		top = Math.min(top, box.top);
+		right = Math.max(right, box.left + box.width);
+		bottom = Math.max(bottom, box.top + box.height);
+	}
+	return {
+		left,
+		top,
+		width: right - left,
+		height: bottom - top
+	};
+}
+function padAndRound(rect, padding) {
+	const left = Math.floor(rect.left - padding);
+	const top = Math.floor(rect.top - padding);
+	return {
+		left,
+		top,
+		width: Math.max(1, Math.ceil(rect.left + rect.width + padding) - left),
+		height: Math.max(1, Math.ceil(rect.top + rect.height + padding) - top)
+	};
+}
+function resolveExportArea(canvas, area, padding) {
+	if (typeof area === "object") return padAndRound(area, padding);
+	if (area === "canvas") return {
+		left: 0,
+		top: 0,
+		width: canvas.getWidth(),
+		height: canvas.getHeight()
+	};
+	const bounds = boundsOf(area === "selection" ? canvas.getActiveObjects?.() ?? [] : canvas.getObjects());
+	if (bounds === null) throw new require_errors.DocumentEngineError("INVALID_EXPORT_OPTIONS", `Cannot export the ${area} because ${area === "selection" ? "nothing is selected" : "the canvas is empty"}`);
+	return padAndRound(bounds, padding);
+}
+//#endregion
+exports.resolveExportArea = resolveExportArea;

package/dist/export/export-area.js

@@ -0,0 +1,46 @@
+import { DocumentEngineError } from "../engine/errors.js";
+//#region src/export/export-area.ts
+function boundsOf(objects) {
+	if (objects.length === 0) return null;
+	let left = Infinity;
+	let top = Infinity;
+	let right = -Infinity;
+	let bottom = -Infinity;
+	for (const object of objects) {
+		const box = object.getBoundingRect();
+		left = Math.min(left, box.left);
+		top = Math.min(top, box.top);
+		right = Math.max(right, box.left + box.width);
+		bottom = Math.max(bottom, box.top + box.height);
+	}
+	return {
+		left,
+		top,
+		width: right - left,
+		height: bottom - top
+	};
+}
+function padAndRound(rect, padding) {
+	const left = Math.floor(rect.left - padding);
+	const top = Math.floor(rect.top - padding);
+	return {
+		left,
+		top,
+		width: Math.max(1, Math.ceil(rect.left + rect.width + padding) - left),
+		height: Math.max(1, Math.ceil(rect.top + rect.height + padding) - top)
+	};
+}
+function resolveExportArea(canvas, area, padding) {
+	if (typeof area === "object") return padAndRound(area, padding);
+	if (area === "canvas") return {
+		left: 0,
+		top: 0,
+		width: canvas.getWidth(),
+		height: canvas.getHeight()
+	};
+	const bounds = boundsOf(area === "selection" ? canvas.getActiveObjects?.() ?? [] : canvas.getObjects());
+	if (bounds === null) throw new DocumentEngineError("INVALID_EXPORT_OPTIONS", `Cannot export the ${area} because ${area === "selection" ? "nothing is selected" : "the canvas is empty"}`);
+	return padAndRound(bounds, padding);
+}
+//#endregion
+export { resolveExportArea };

package/dist/export/export-options.cjs

@@ -0,0 +1,47 @@
+const require_errors = require("../engine/errors.cjs");
+//#region src/export/export-options.ts
+const formats = /* @__PURE__ */ new Set([
+	"png",
+	"jpeg",
+	"webp",
+	"svg",
+	"json"
+]);
+function invalid(message) {
+	return new require_errors.DocumentEngineError("INVALID_EXPORT_OPTIONS", message);
+}
+function isPositive(value) {
+	return Number.isFinite(value) && value > 0;
+}
+function isRasterFormat(format) {
+	return format === "png" || format === "jpeg" || format === "webp";
+}
+function normalizeExportOptions(options) {
+	if (!formats.has(options.format)) throw invalid(`Unknown export format "${String(options.format)}", use png, jpeg, webp, svg or json`);
+	const scale = options.scale ?? 1;
+	if (!isPositive(scale)) throw invalid("scale must be a number greater than zero");
+	const quality = options.quality ?? .92;
+	if (!(quality >= 0 && quality <= 1)) throw invalid("quality must be between 0 and 1");
+	const padding = options.padding ?? 0;
+	if (!(Number.isFinite(padding) && padding >= 0)) throw invalid("padding must be zero or more");
+	const area = options.area ?? "canvas";
+	if (typeof area === "object") {
+		if (![area.left, area.top].every(Number.isFinite) || !isPositive(area.width) || !isPositive(area.height)) throw invalid("area needs finite left and top and a positive width and height");
+	} else if (![
+		"canvas",
+		"content",
+		"selection"
+	].includes(area)) throw invalid(`Unknown export area "${String(area)}", use canvas, content, selection or a rectangle`);
+	return {
+		format: options.format,
+		scale,
+		quality,
+		area,
+		padding,
+		background: options.background ?? "keep",
+		signal: options.signal
+	};
+}
+//#endregion
+exports.isRasterFormat = isRasterFormat;
+exports.normalizeExportOptions = normalizeExportOptions;

package/dist/export/export-options.d.cts

@@ -0,0 +1,20 @@
+//#region src/export/export-options.d.ts
+export type ExportFormat = "png" | "jpeg" | "webp" | "svg" | "json";
+export interface ExportRect {
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+}
+export type ExportArea = "canvas" | "content" | "selection" | ExportRect;
+export type ExportBackground = "keep" | "transparent" | (string & {});
+export interface ExportOptions {
+  format: ExportFormat;
+  scale?: number;
+  quality?: number;
+  area?: ExportArea;
+  padding?: number;
+  background?: ExportBackground;
+  signal?: AbortSignal;
+}
+//#endregion

package/dist/export/export-options.d.ts

@@ -0,0 +1,20 @@
+//#region src/export/export-options.d.ts
+export type ExportFormat = "png" | "jpeg" | "webp" | "svg" | "json";
+export interface ExportRect {
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+}
+export type ExportArea = "canvas" | "content" | "selection" | ExportRect;
+export type ExportBackground = "keep" | "transparent" | (string & {});
+export interface ExportOptions {
+  format: ExportFormat;
+  scale?: number;
+  quality?: number;
+  area?: ExportArea;
+  padding?: number;
+  background?: ExportBackground;
+  signal?: AbortSignal;
+}
+//#endregion

package/dist/export/export-options.js

@@ -0,0 +1,46 @@
+import { DocumentEngineError } from "../engine/errors.js";
+//#region src/export/export-options.ts
+const formats = /* @__PURE__ */ new Set([
+	"png",
+	"jpeg",
+	"webp",
+	"svg",
+	"json"
+]);
+function invalid(message) {
+	return new DocumentEngineError("INVALID_EXPORT_OPTIONS", message);
+}
+function isPositive(value) {
+	return Number.isFinite(value) && value > 0;
+}
+function isRasterFormat(format) {
+	return format === "png" || format === "jpeg" || format === "webp";
+}
+function normalizeExportOptions(options) {
+	if (!formats.has(options.format)) throw invalid(`Unknown export format "${String(options.format)}", use png, jpeg, webp, svg or json`);
+	const scale = options.scale ?? 1;
+	if (!isPositive(scale)) throw invalid("scale must be a number greater than zero");
+	const quality = options.quality ?? .92;
+	if (!(quality >= 0 && quality <= 1)) throw invalid("quality must be between 0 and 1");
+	const padding = options.padding ?? 0;
+	if (!(Number.isFinite(padding) && padding >= 0)) throw invalid("padding must be zero or more");
+	const area = options.area ?? "canvas";
+	if (typeof area === "object") {
+		if (![area.left, area.top].every(Number.isFinite) || !isPositive(area.width) || !isPositive(area.height)) throw invalid("area needs finite left and top and a positive width and height");
+	} else if (![
+		"canvas",
+		"content",
+		"selection"
+	].includes(area)) throw invalid(`Unknown export area "${String(area)}", use canvas, content, selection or a rectangle`);
+	return {
+		format: options.format,
+		scale,
+		quality,
+		area,
+		padding,
+		background: options.background ?? "keep",
+		signal: options.signal
+	};
+}
+//#endregion
+export { isRasterFormat, normalizeExportOptions };

package/dist/export/preflight-export.cjs

@@ -0,0 +1,105 @@
+const require_font_check = require("../assets/font-check.cjs");
+const require_image_check = require("../assets/image-check.cjs");
+const require_export_options = require("./export-options.cjs");
+const require_object_ids = require("../fabric/object-ids.cjs");
+const require_walk_objects = require("../fabric/walk-objects.cjs");
+//#region src/export/preflight-export.ts
+function imageElementsOf(object) {
+	const elements = [];
+	const withElement = object;
+	if (typeof withElement.getElement === "function") elements.push(withElement.getElement());
+	for (const paint of [object.fill, object.stroke]) {
+		const source = paint?.source;
+		if (source !== void 0) elements.push(source);
+	}
+	return elements.filter((element) => typeof HTMLImageElement !== "undefined" && element instanceof HTMLImageElement);
+}
+function collectImageUses(objects) {
+	const uses = /* @__PURE__ */ new Map();
+	const pending = objects.map((object) => ({
+		object,
+		ownerId: require_object_ids.readObjectId(object)
+	}));
+	while (pending.length > 0) {
+		const { object, ownerId } = pending.pop();
+		const id = require_object_ids.readObjectId(object) ?? ownerId;
+		for (const element of imageElementsOf(object)) {
+			const url = element.currentSrc || element.src;
+			const use = uses.get(url) ?? {
+				element,
+				objectIds: /* @__PURE__ */ new Set()
+			};
+			if (id !== void 0) use.objectIds.add(id);
+			uses.set(url, use);
+		}
+		require_walk_objects.childrenOf(object).forEach((child) => pending.push({
+			object: child,
+			ownerId: id
+		}));
+		if (object.clipPath) pending.push({
+			object: object.clipPath,
+			ownerId: id
+		});
+	}
+	return uses;
+}
+function isBroken(element) {
+	return element.complete && element.naturalWidth === 0;
+}
+function shortUrl(url) {
+	return url.length > 80 ? `${url.slice(0, 77)}...` : url;
+}
+async function preflightExport(canvas, format, fonts, assetOptions) {
+	const problems = [];
+	const warnings = [];
+	if (format === "json") return {
+		ok: true,
+		problems,
+		warnings
+	};
+	for (const [url, use] of collectImageUses(canvas.getObjects())) {
+		const objectIds = [...use.objectIds];
+		if (isBroken(use.element)) problems.push({
+			code: "MISSING_IMAGE",
+			message: `The image ${shortUrl(url)} did not load`,
+			url,
+			objectIds
+		});
+		else if (require_export_options.isRasterFormat(format) && require_image_check.isCrossOriginUrl(url) && !use.element.crossOrigin) problems.push({
+			code: "CROSS_ORIGIN_IMAGE",
+			message: `The image ${shortUrl(url)} comes from another site without crossOrigin, so the browser blocks exporting it. Load it with crossOrigin: 'anonymous' from a server that allows CORS.`,
+			url,
+			objectIds
+		});
+		else if (format === "svg" && !require_image_check.isPortableUrl(url)) warnings.push({
+			code: "ASSET_NOT_PORTABLE",
+			message: `The SVG links to ${shortUrl(url)}, which only exists in this tab`,
+			url,
+			objectIds
+		});
+	}
+	const fontSet = typeof document === "undefined" ? void 0 : document.fonts;
+	if (fontSet) await fontSet.ready;
+	for (const font of await require_font_check.findUnavailableFonts(fonts, assetOptions.loadFont)) {
+		const message = `The font "${font.family}" (${font.weight}, ${font.style}) is not available`;
+		if (assetOptions.requireFonts) problems.push({
+			code: "MISSING_FONT",
+			message,
+			family: font.family,
+			objectIds: font.objectIds
+		});
+		else warnings.push({
+			code: "FONT_UNAVAILABLE",
+			message: `${message}, text will use a fallback font`,
+			family: font.family,
+			objectIds: font.objectIds
+		});
+	}
+	return {
+		ok: problems.length === 0,
+		problems,
+		warnings
+	};
+}
+//#endregion
+exports.preflightExport = preflightExport;

package/dist/export/preflight-export.d.cts

@@ -0,0 +1,17 @@
+import { AssetWarning } from "../assets/asset-pipeline.cjs";
+import { StaticCanvas } from "fabric";
+//#region src/export/preflight-export.d.ts
+export type ExportProblemCode = "MISSING_IMAGE" | "CROSS_ORIGIN_IMAGE" | "MISSING_FONT";
+export interface ExportProblem {
+  code: ExportProblemCode;
+  message: string;
+  url?: string;
+  family?: string;
+  objectIds: string[];
+}
+export interface ExportPreflight {
+  ok: boolean;
+  problems: ExportProblem[];
+  warnings: AssetWarning[];
+}
+//#endregion

package/dist/export/preflight-export.d.ts

@@ -0,0 +1,17 @@
+import { AssetWarning } from "../assets/asset-pipeline.js";
+import { StaticCanvas } from "fabric";
+//#region src/export/preflight-export.d.ts
+export type ExportProblemCode = "MISSING_IMAGE" | "CROSS_ORIGIN_IMAGE" | "MISSING_FONT";
+export interface ExportProblem {
+  code: ExportProblemCode;
+  message: string;
+  url?: string;
+  family?: string;
+  objectIds: string[];
+}
+export interface ExportPreflight {
+  ok: boolean;
+  problems: ExportProblem[];
+  warnings: AssetWarning[];
+}
+//#endregion

package/dist/export/preflight-export.js

@@ -0,0 +1,105 @@
+import { findUnavailableFonts } from "../assets/font-check.js";
+import { isCrossOriginUrl, isPortableUrl } from "../assets/image-check.js";
+import { isRasterFormat } from "./export-options.js";
+import { readObjectId } from "../fabric/object-ids.js";
+import { childrenOf } from "../fabric/walk-objects.js";
+//#region src/export/preflight-export.ts
+function imageElementsOf(object) {
+	const elements = [];
+	const withElement = object;
+	if (typeof withElement.getElement === "function") elements.push(withElement.getElement());
+	for (const paint of [object.fill, object.stroke]) {
+		const source = paint?.source;
+		if (source !== void 0) elements.push(source);
+	}
+	return elements.filter((element) => typeof HTMLImageElement !== "undefined" && element instanceof HTMLImageElement);
+}
+function collectImageUses(objects) {
+	const uses = /* @__PURE__ */ new Map();
+	const pending = objects.map((object) => ({
+		object,
+		ownerId: readObjectId(object)
+	}));
+	while (pending.length > 0) {
+		const { object, ownerId } = pending.pop();
+		const id = readObjectId(object) ?? ownerId;
+		for (const element of imageElementsOf(object)) {
+			const url = element.currentSrc || element.src;
+			const use = uses.get(url) ?? {
+				element,
+				objectIds: /* @__PURE__ */ new Set()
+			};
+			if (id !== void 0) use.objectIds.add(id);
+			uses.set(url, use);
+		}
+		childrenOf(object).forEach((child) => pending.push({
+			object: child,
+			ownerId: id
+		}));
+		if (object.clipPath) pending.push({
+			object: object.clipPath,
+			ownerId: id
+		});
+	}
+	return uses;
+}
+function isBroken(element) {
+	return element.complete && element.naturalWidth === 0;
+}
+function shortUrl(url) {
+	return url.length > 80 ? `${url.slice(0, 77)}...` : url;
+}
+async function preflightExport(canvas, format, fonts, assetOptions) {
+	const problems = [];
+	const warnings = [];
+	if (format === "json") return {
+		ok: true,
+		problems,
+		warnings
+	};
+	for (const [url, use] of collectImageUses(canvas.getObjects())) {
+		const objectIds = [...use.objectIds];
+		if (isBroken(use.element)) problems.push({
+			code: "MISSING_IMAGE",
+			message: `The image ${shortUrl(url)} did not load`,
+			url,
+			objectIds
+		});
+		else if (isRasterFormat(format) && isCrossOriginUrl(url) && !use.element.crossOrigin) problems.push({
+			code: "CROSS_ORIGIN_IMAGE",
+			message: `The image ${shortUrl(url)} comes from another site without crossOrigin, so the browser blocks exporting it. Load it with crossOrigin: 'anonymous' from a server that allows CORS.`,
+			url,
+			objectIds
+		});
+		else if (format === "svg" && !isPortableUrl(url)) warnings.push({
+			code: "ASSET_NOT_PORTABLE",
+			message: `The SVG links to ${shortUrl(url)}, which only exists in this tab`,
+			url,
+			objectIds
+		});
+	}
+	const fontSet = typeof document === "undefined" ? void 0 : document.fonts;
+	if (fontSet) await fontSet.ready;
+	for (const font of await findUnavailableFonts(fonts, assetOptions.loadFont)) {
+		const message = `The font "${font.family}" (${font.weight}, ${font.style}) is not available`;
+		if (assetOptions.requireFonts) problems.push({
+			code: "MISSING_FONT",
+			message,
+			family: font.family,
+			objectIds: font.objectIds
+		});
+		else warnings.push({
+			code: "FONT_UNAVAILABLE",
+			message: `${message}, text will use a fallback font`,
+			family: font.family,
+			objectIds: font.objectIds
+		});
+	}
+	return {
+		ok: problems.length === 0,
+		problems,
+		warnings
+	};
+}
+//#endregion
+export { preflightExport };

package/dist/export/render-export.cjs

@@ -0,0 +1,69 @@
+//#region src/export/render-export.ts
+const identity = [
+	1,
+	0,
+	0,
+	1,
+	0,
+	0
+];
+const mimeTypes = {
+	png: "image/png",
+	jpeg: "image/jpeg",
+	webp: "image/webp",
+	svg: "image/svg+xml",
+	json: "application/json"
+};
+function chooseBackground(background, format, current) {
+	if (background === "transparent") return format === "jpeg" ? "white" : "";
+	if (background !== "keep") return background;
+	return format === "jpeg" && !(current !== void 0 && current !== null && current !== "") ? "white" : current;
+}
+function withExportView(canvas, background, format, work) {
+	const savedTransform = [...canvas.viewportTransform];
+	const savedBackground = canvas.backgroundColor;
+	canvas.setViewportTransform(identity);
+	canvas.backgroundColor = chooseBackground(background, format, savedBackground);
+	try {
+		return work();
+	} finally {
+		canvas.backgroundColor = savedBackground;
+		canvas.setViewportTransform(savedTransform);
+		canvas.requestRenderAll();
+	}
+}
+function renderRaster(canvas, area, format, scale, quality) {
+	return canvas.toDataURL({
+		...area,
+		format,
+		quality,
+		multiplier: scale,
+		enableRetinaScaling: false
+	});
+}
+function renderSvg(canvas, area, scale) {
+	return canvas.toSVG({
+		viewBox: {
+			x: area.left,
+			y: area.top,
+			width: area.width,
+			height: area.height
+		},
+		width: String(area.width * scale),
+		height: String(area.height * scale)
+	});
+}
+function dataUrlToBlob(dataUrl) {
+	const [header, payload = ""] = dataUrl.split(",");
+	const mimeType = /data:([^;]+)/.exec(header ?? "")?.[1] ?? "application/octet-stream";
+	const binary = atob(payload);
+	const bytes = new Uint8Array(binary.length);
+	for (let index = 0; index < binary.length; index += 1) bytes[index] = binary.charCodeAt(index);
+	return new Blob([bytes], { type: mimeType });
+}
+//#endregion
+exports.dataUrlToBlob = dataUrlToBlob;
+exports.mimeTypes = mimeTypes;
+exports.renderRaster = renderRaster;
+exports.renderSvg = renderSvg;
+exports.withExportView = withExportView;

package/dist/export/render-export.js

@@ -0,0 +1,65 @@
+//#region src/export/render-export.ts
+const identity = [
+	1,
+	0,
+	0,
+	1,
+	0,
+	0
+];
+const mimeTypes = {
+	png: "image/png",
+	jpeg: "image/jpeg",
+	webp: "image/webp",
+	svg: "image/svg+xml",
+	json: "application/json"
+};
+function chooseBackground(background, format, current) {
+	if (background === "transparent") return format === "jpeg" ? "white" : "";
+	if (background !== "keep") return background;
+	return format === "jpeg" && !(current !== void 0 && current !== null && current !== "") ? "white" : current;
+}
+function withExportView(canvas, background, format, work) {
+	const savedTransform = [...canvas.viewportTransform];
+	const savedBackground = canvas.backgroundColor;
+	canvas.setViewportTransform(identity);
+	canvas.backgroundColor = chooseBackground(background, format, savedBackground);
+	try {
+		return work();
+	} finally {
+		canvas.backgroundColor = savedBackground;
+		canvas.setViewportTransform(savedTransform);
+		canvas.requestRenderAll();
+	}
+}
+function renderRaster(canvas, area, format, scale, quality) {
+	return canvas.toDataURL({
+		...area,
+		format,
+		quality,
+		multiplier: scale,
+		enableRetinaScaling: false
+	});
+}
+function renderSvg(canvas, area, scale) {
+	return canvas.toSVG({
+		viewBox: {
+			x: area.left,
+			y: area.top,
+			width: area.width,
+			height: area.height
+		},
+		width: String(area.width * scale),
+		height: String(area.height * scale)
+	});
+}
+function dataUrlToBlob(dataUrl) {
+	const [header, payload = ""] = dataUrl.split(",");
+	const mimeType = /data:([^;]+)/.exec(header ?? "")?.[1] ?? "application/octet-stream";
+	const binary = atob(payload);
+	const bytes = new Uint8Array(binary.length);
+	for (let index = 0; index < binary.length; index += 1) bytes[index] = binary.charCodeAt(index);
+	return new Blob([bytes], { type: mimeType });
+}
+//#endregion
+export { dataUrlToBlob, mimeTypes, renderRaster, renderSvg, withExportView };

package/dist/history/apply-state.cjs

@@ -1,5 +1,5 @@
-const require_fabric_adapter = require("../fabric/fabric-adapter.cjs");
 const require_object_ids = require("../fabric/object-ids.cjs");
+const require_fabric_adapter = require("../fabric/fabric-adapter.cjs");
 //#region src/history/apply-state.ts
 function arrangeObjects(current, change, created) {
 	const arranged = [];

package/dist/history/apply-state.js

@@ -1,5 +1,5 @@
-import { createObjects } from "../fabric/fabric-adapter.js";
 import { readObjectId } from "../fabric/object-ids.js";
+import { createObjects } from "../fabric/fabric-adapter.js";
 //#region src/history/apply-state.ts
 function arrangeObjects(current, change, created) {
 	const arranged = [];

package/dist/index.cjs

@@ -5,11 +5,13 @@ const require_validate_document = require("./document/validate-document.cjs");
 const require_create_document_engine = require("./engine/create-document-engine.cjs");
 const require_keyboard_shortcuts = require("./history/keyboard-shortcuts.cjs");
 const require_unsaved_changes_warning = require("./save/unsaved-changes-warning.cjs");
+const require_download_export = require("./export/download-export.cjs");
 exports.CURRENT_SCHEMA_VERSION = require_document_format.CURRENT_SCHEMA_VERSION;
 exports.DocumentEngineError = require_errors.DocumentEngineError;
 exports.bindKeyboardShortcuts = require_keyboard_shortcuts.bindKeyboardShortcuts;
 exports.bindUnsavedChangesWarning = require_unsaved_changes_warning.bindUnsavedChangesWarning;
 exports.createConflictError = require_errors.createConflictError;
 exports.createDocumentEngine = require_create_document_engine.createDocumentEngine;
+exports.downloadExport = require_download_export.downloadExport;
 exports.isDocumentEngineError = require_errors.isDocumentEngineError;
 exports.validateDocument = require_validate_document.validateDocument;

package/dist/index.d.cts

@@ -2,6 +2,8 @@ import { CURRENT_SCHEMA_VERSION, DocumentCanvas, DocumentInfo, FabricDocument, S
 import { AssetManifest, FontAsset, ImageAsset } from "./assets/asset-manifest.cjs";
 import { FontLoader } from "./assets/font-check.cjs";
 import { AssetOptions, AssetReport, AssetWarning, AssetWarningCode, UploadRequest } from "./assets/asset-pipeline.cjs";
+import { ExportArea, ExportBackground, ExportFormat, ExportOptions, ExportRect } from "./export/export-options.cjs";
+import { ExportPreflight, ExportProblem, ExportProblemCode } from "./export/preflight-export.cjs";
 import { NewDocumentOptions } from "./document/create-document.cjs";
 import { CustomObjectDefinition } from "./fabric/object-registry.cjs";
 import { HistoryOptions, HistoryState } from "./history/create-history.cjs";
@@ -13,8 +15,9 @@ import { DocumentEngineError, DocumentEngineErrorDetails, DocumentErrorCode, Doc
 import { DocumentStorage, SaveContext, SaveResult } from "./storage/storage-contract.cjs";
 import { SaveOptions, SaveRetryEvent, SaveState, SaveStatus } from "./save/save-controller.cjs";
 import { Unsubscribe } from "./engine/event-emitter.cjs";
-import { DocumentEngine, DocumentEngineEvents, DocumentEngineOptions, LoadOptions, createDocumentEngine } from "./engine/create-document-engine.cjs";
+import { DocumentEngine, DocumentEngineEvents, DocumentEngineOptions, ExportResult, LoadOptions, createDocumentEngine } from "./engine/create-document-engine.cjs";
 import { validateDocument } from "./document/validate-document.cjs";
 import { KeyboardShortcutOptions, UndoRedoTarget, bindKeyboardShortcuts } from "./history/keyboard-shortcuts.cjs";
 import { UnsavedChangesSource, bindUnsavedChangesWarning } from "./save/unsaved-changes-warning.cjs";
-export { type AssetManifest, type AssetOptions, type AssetReport, type AssetWarning, type AssetWarningCode, type AutosaveOptions, CURRENT_SCHEMA_VERSION, type CustomObjectDefinition, type DocumentCanvas, type DocumentEngine, DocumentEngineError, type DocumentEngineErrorDetails, type DocumentEngineEvents, type DocumentEngineOptions, type DocumentErrorCode, type DocumentInfo, type DocumentIssue, type DocumentStorage, type FabricDocument, type FontAsset, type FontLoader, type HistoryOptions, type HistoryState, type ImageAsset, type InterruptedLoad, type KeyboardShortcutOptions, type LoadOptions, type NewDocumentOptions, type RecoveryOptions, type RecoveryRecord, type RecoveryStore, type RetryOptions, type SaveContext, type SaveOptions, type SaveResult, type SaveRetryEvent, type SaveState, type SaveStatus, type SerializedFabricObject, type UndoRedoTarget, type UnsavedChangesSource, type Unsubscribe, type UploadRequest, bindKeyboardShortcuts, bindUnsavedChangesWarning, createConflictError, createDocumentEngine, isDocumentEngineError, validateDocument };
+import { DownloadableExport, downloadExport } from "./export/download-export.cjs";
+export { type AssetManifest, type AssetOptions, type AssetReport, type AssetWarning, type AssetWarningCode, type AutosaveOptions, CURRENT_SCHEMA_VERSION, type CustomObjectDefinition, type DocumentCanvas, type DocumentEngine, DocumentEngineError, type DocumentEngineErrorDetails, type DocumentEngineEvents, type DocumentEngineOptions, type DocumentErrorCode, type DocumentInfo, type DocumentIssue, type DocumentStorage, type DownloadableExport, type ExportArea, type ExportBackground, type ExportFormat, type ExportOptions, type ExportPreflight, type ExportProblem, type ExportProblemCode, type ExportRect, type ExportResult, type FabricDocument, type FontAsset, type FontLoader, type HistoryOptions, type HistoryState, type ImageAsset, type InterruptedLoad, type KeyboardShortcutOptions, type LoadOptions, type NewDocumentOptions, type RecoveryOptions, type RecoveryRecord, type RecoveryStore, type RetryOptions, type SaveContext, type SaveOptions, type SaveResult, type SaveRetryEvent, type SaveState, type SaveStatus, type SerializedFabricObject, type UndoRedoTarget, type UnsavedChangesSource, type Unsubscribe, type UploadRequest, bindKeyboardShortcuts, bindUnsavedChangesWarning, createConflictError, createDocumentEngine, downloadExport, isDocumentEngineError, validateDocument };

package/dist/index.d.ts

@@ -2,6 +2,8 @@ import { CURRENT_SCHEMA_VERSION, DocumentCanvas, DocumentInfo, FabricDocument, S
 import { AssetManifest, FontAsset, ImageAsset } from "./assets/asset-manifest.js";
 import { FontLoader } from "./assets/font-check.js";
 import { AssetOptions, AssetReport, AssetWarning, AssetWarningCode, UploadRequest } from "./assets/asset-pipeline.js";
+import { ExportArea, ExportBackground, ExportFormat, ExportOptions, ExportRect } from "./export/export-options.js";
+import { ExportPreflight, ExportProblem, ExportProblemCode } from "./export/preflight-export.js";
 import { NewDocumentOptions } from "./document/create-document.js";
 import { CustomObjectDefinition } from "./fabric/object-registry.js";
 import { HistoryOptions, HistoryState } from "./history/create-history.js";
@@ -13,8 +15,9 @@ import { DocumentEngineError, DocumentEngineErrorDetails, DocumentErrorCode, Doc
 import { DocumentStorage, SaveContext, SaveResult } from "./storage/storage-contract.js";
 import { SaveOptions, SaveRetryEvent, SaveState, SaveStatus } from "./save/save-controller.js";
 import { Unsubscribe } from "./engine/event-emitter.js";
-import { DocumentEngine, DocumentEngineEvents, DocumentEngineOptions, LoadOptions, createDocumentEngine } from "./engine/create-document-engine.js";
+import { DocumentEngine, DocumentEngineEvents, DocumentEngineOptions, ExportResult, LoadOptions, createDocumentEngine } from "./engine/create-document-engine.js";
 import { validateDocument } from "./document/validate-document.js";
 import { KeyboardShortcutOptions, UndoRedoTarget, bindKeyboardShortcuts } from "./history/keyboard-shortcuts.js";
 import { UnsavedChangesSource, bindUnsavedChangesWarning } from "./save/unsaved-changes-warning.js";
-export { type AssetManifest, type AssetOptions, type AssetReport, type AssetWarning, type AssetWarningCode, type AutosaveOptions, CURRENT_SCHEMA_VERSION, type CustomObjectDefinition, type DocumentCanvas, type DocumentEngine, DocumentEngineError, type DocumentEngineErrorDetails, type DocumentEngineEvents, type DocumentEngineOptions, type DocumentErrorCode, type DocumentInfo, type DocumentIssue, type DocumentStorage, type FabricDocument, type FontAsset, type FontLoader, type HistoryOptions, type HistoryState, type ImageAsset, type InterruptedLoad, type KeyboardShortcutOptions, type LoadOptions, type NewDocumentOptions, type RecoveryOptions, type RecoveryRecord, type RecoveryStore, type RetryOptions, type SaveContext, type SaveOptions, type SaveResult, type SaveRetryEvent, type SaveState, type SaveStatus, type SerializedFabricObject, type UndoRedoTarget, type UnsavedChangesSource, type Unsubscribe, type UploadRequest, bindKeyboardShortcuts, bindUnsavedChangesWarning, createConflictError, createDocumentEngine, isDocumentEngineError, validateDocument };
+import { DownloadableExport, downloadExport } from "./export/download-export.js";
+export { type AssetManifest, type AssetOptions, type AssetReport, type AssetWarning, type AssetWarningCode, type AutosaveOptions, CURRENT_SCHEMA_VERSION, type CustomObjectDefinition, type DocumentCanvas, type DocumentEngine, DocumentEngineError, type DocumentEngineErrorDetails, type DocumentEngineEvents, type DocumentEngineOptions, type DocumentErrorCode, type DocumentInfo, type DocumentIssue, type DocumentStorage, type DownloadableExport, type ExportArea, type ExportBackground, type ExportFormat, type ExportOptions, type ExportPreflight, type ExportProblem, type ExportProblemCode, type ExportRect, type ExportResult, type FabricDocument, type FontAsset, type FontLoader, type HistoryOptions, type HistoryState, type ImageAsset, type InterruptedLoad, type KeyboardShortcutOptions, type LoadOptions, type NewDocumentOptions, type RecoveryOptions, type RecoveryRecord, type RecoveryStore, type RetryOptions, type SaveContext, type SaveOptions, type SaveResult, type SaveRetryEvent, type SaveState, type SaveStatus, type SerializedFabricObject, type UndoRedoTarget, type UnsavedChangesSource, type Unsubscribe, type UploadRequest, bindKeyboardShortcuts, bindUnsavedChangesWarning, createConflictError, createDocumentEngine, downloadExport, isDocumentEngineError, validateDocument };

package/dist/index.js

@@ -4,4 +4,5 @@ import { validateDocument } from "./document/validate-document.js";
 import { createDocumentEngine } from "./engine/create-document-engine.js";
 import { bindKeyboardShortcuts } from "./history/keyboard-shortcuts.js";
 import { bindUnsavedChangesWarning } from "./save/unsaved-changes-warning.js";
-export { CURRENT_SCHEMA_VERSION, DocumentEngineError, bindKeyboardShortcuts, bindUnsavedChangesWarning, createConflictError, createDocumentEngine, isDocumentEngineError, validateDocument };
+import { downloadExport } from "./export/download-export.js";
+export { CURRENT_SCHEMA_VERSION, DocumentEngineError, bindKeyboardShortcuts, bindUnsavedChangesWarning, createConflictError, createDocumentEngine, downloadExport, isDocumentEngineError, validateDocument };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fabricjs-document-engine",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Turn an existing Fabric.js canvas into a dependable editable document: stable object ids, versioned save and load, undo and redo, safe autosave with conflict protection, custom objects and clear errors.",
   "keywords": [
     "fabric",