Options
All
  • Public
  • Public/Protected
  • All
Menu

Class ImageSketchpad

Image sketchpad main class. It handles creation of canvas element, drawing on it, and merge it with the image and handle the data as json out- or input.

Hierarchy

  • ImageSketchpad

Index

Constructors

Properties

Methods

Constructors

constructor

  • Creates an instance of image sketchpad.

    example

    Run image sketchpad

    VanillaJS

     
    const imageEl = document.getElementById('Image');
    const sketchPad = ImageSketchpad(imageEl, { lineWidth: 5, lineMaxWidth: 10, lineColor: '#ff0000' });

    Parameters

    • image: HTMLImageElement

      Image html element.

    • Optional options: Partial<Options>

      Sketchpad options as javascript object.

    Returns ImageSketchpad

Properties

Readonly canvas

canvas: Canvas = ...

Canvas helper class.

Methods

clear

destroy

  • destroy(): void

disable

download

  • download(originalSize?: boolean): Promise<string>

  • Download merged image with sketch as png file.

    Parameters

    • originalSize: boolean = true

      Download image with original size.

    Returns Promise<string>

enable

loadJson

mergeImageWithSketch

  • mergeImageWithSketch(originalSize?: boolean): Promise<string>

  • Merges image with sketch and returns a base64 string as promise.

    Parameters

    • originalSize: boolean = true

      Download image with original size.

    Returns Promise<string>

redo

setOptions

toJson

  • toJson(): string

toJsonAsync

  • toJsonAsync(): Promise<string>

undo

Generated using TypeDoc