@inweb/markup 27.1.2 → 27.1.4

package/lib/markup/IMarkup.d.ts

@@ -33,7 +33,7 @@ export interface IMarkup {
      *
      * @param container - Container element used to operate on. This is usually a `<canvas>` or `<div>` on
      *   top of which the markup is drawn. If the `container` is a `<canvas>` element, its content will be
-     *   combined with the markup in the viewpoint snapshot.
+     *   combined with the markup in the snapshot.
      * @param containerEvents - Deprecated since `26.7`, can be null. List of container events, such as
      *   mouse events or
      *   {@link https://developer.mozilla.org/docs/Web/API/Pointer_events#event_types_and_global_event_handlers | pointer events}
@@ -99,6 +99,20 @@ export interface IMarkup {
      * Saves the markup state at the viewpoint.
      */
     getViewpoint(viewpoint: IViewpoint): IViewpoint;
+    /**
+     * Creates a snapshot image combining the container canvas with markup overlay.
+     *
+     * @param type - The MIME type of the image format. Can be one of:
+     *
+     *   - `image/png` - PNG format with lossless compression (recommended for quality)
+     *   - `image/jpeg` - JPEG format with lossy compression (smaller file size)
+     *   - `image/webp` - WebP format (modern browsers only)
+     *
+     * @param quality - A number between 0 and 1 indicating the image quality for lossy formats.
+     * @returns A {@link https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Data_URIs | Data URL}
+     *   string containing the snapshot image.
+     */
+    getSnapshot(type?: string, quality?: number): string;
     /**
      * Enables mouse interactions to select or draw markups.
      *

package/lib/markup/Konva/KonvaMarkup.d.ts

@@ -50,6 +50,7 @@ export declare class KonvaMarkup implements IMarkup {
     colorizeSelectedMarkups(r: number, g: number, b: number): void;
     setViewpoint(viewpoint: IViewpoint): void;
     getViewpoint(viewpoint: IViewpoint): IViewpoint;
+    getSnapshot(type?: string, quality?: number): string;
     enableEditMode(mode: MarkupMode | false): this;
     createObject(type: string, params: any): IMarkupObject;
     getObjects(): IMarkupObject[];
@@ -70,7 +71,6 @@ export declare class KonvaMarkup implements IMarkup {
     private getMarkupArrows;
     private getMarkupImages;
     private getMarkupClouds;
-    private combineMarkupWithDrawing;
     private addLine;
     private createTextInput;
     private removeTextInput;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inweb/markup",
-  "version": "27.1.2",
+  "version": "27.1.4",
   "description": "JavaScript 2D markups",
   "homepage": "https://cloud.opendesign.com/docs/index.html",
   "license": "SEE LICENSE IN LICENSE",
@@ -26,8 +26,8 @@
     "docs": "typedoc"
   },
   "dependencies": {
-    "@inweb/eventemitter2": "~27.1.2",
-    "@inweb/viewer-core": "~27.1.2"
+    "@inweb/eventemitter2": "~27.1.4",
+    "@inweb/viewer-core": "~27.1.4"
   },
   "devDependencies": {
     "konva": "^10.0.2"

package/src/markup/IMarkup.ts

@@ -61,7 +61,7 @@ export interface IMarkup {
    *
    * @param container - Container element used to operate on. This is usually a `<canvas>` or `<div>` on
    *   top of which the markup is drawn. If the `container` is a `<canvas>` element, its content will be
-   *   combined with the markup in the viewpoint snapshot.
+   *   combined with the markup in the snapshot.
    * @param containerEvents - Deprecated since `26.7`, can be null. List of container events, such as
    *   mouse events or
    *   {@link https://developer.mozilla.org/docs/Web/API/Pointer_events#event_types_and_global_event_handlers | pointer events}
@@ -138,6 +138,21 @@ export interface IMarkup {
    */
   getViewpoint(viewpoint: IViewpoint): IViewpoint;
 
+  /**
+   * Creates a snapshot image combining the container canvas with markup overlay.
+   *
+   * @param type - The MIME type of the image format. Can be one of:
+   *
+   *   - `image/png` - PNG format with lossless compression (recommended for quality)
+   *   - `image/jpeg` - JPEG format with lossy compression (smaller file size)
+   *   - `image/webp` - WebP format (modern browsers only)
+   *
+   * @param quality - A number between 0 and 1 indicating the image quality for lossy formats.
+   * @returns A {@link https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Data_URIs | Data URL}
+   *   string containing the snapshot image.
+   */
+  getSnapshot(type?: string, quality?: number): string;
+
   /**
    * Enables mouse interactions to select or draw markups.
    *

package/src/markup/Konva/KonvaMarkup.ts

@@ -323,12 +323,27 @@ export class KonvaMarkup implements IMarkup {
     viewpoint.images = this.getMarkupImages();
     viewpoint.rectangles = this.getMarkupRectangles();
 
-    viewpoint.snapshot = { data: this.combineMarkupWithDrawing() };
     viewpoint.custom_fields.markup_color = this.getMarkupColor();
 
     return viewpoint;
   }
 
+  getSnapshot(type = "image/jpeg", quality = 0.25): string {
+    this.clearSelected();
+
+    const tempCanvas = document.createElement("canvas");
+    if (this._konvaStage) {
+      tempCanvas.width = this._konvaStage.width();
+      tempCanvas.height = this._konvaStage.height();
+
+      const ctx = tempCanvas.getContext("2d");
+      if (this._container instanceof HTMLCanvasElement) ctx.drawImage(this._container, 0, 0);
+      ctx.drawImage(this._konvaStage.toCanvas({ pixelRatio: window.devicePixelRatio }), 0, 0);
+    }
+
+    return tempCanvas.toDataURL(type, quality);
+  }
+
   enableEditMode(mode: MarkupMode | false): this {
     if (!mode || !MarkupMode2Konva[mode]) {
       this.clearSelected();
@@ -863,22 +878,6 @@ export class KonvaMarkup implements IMarkup {
     return clouds;
   }
 
-  private combineMarkupWithDrawing() {
-    this.clearSelected();
-
-    const tempCanvas = document.createElement("canvas");
-    if (this._konvaStage) {
-      tempCanvas.width = this._konvaStage.width();
-      tempCanvas.height = this._konvaStage.height();
-
-      const ctx = tempCanvas.getContext("2d");
-      if (this._container instanceof HTMLCanvasElement) ctx.drawImage(this._container, 0, 0);
-      ctx.drawImage(this._konvaStage.toCanvas({ pixelRatio: window.devicePixelRatio }), 0, 0);
-    }
-
-    return tempCanvas.toDataURL("image/jpeg", 0.25);
-  }
-
   private addLine(
     linePoints: number[],
     color?: string,