image-sketchpad - v1.0.4 / Modules / ImageSketchpad / ImageSketchpad
ImageSketchpad.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.
- clear
- destroy
- disable
- download
- enable
- loadJson
- mergeImageWithSketch
- redo
- setOptions
- toJson
- toJsonAsync
- undo
• new ImageSketchpad(image, options?)
Creates an instance of image sketchpad.
example
Run image sketchpad
const imageEl = document.getElementById('Image');
const sketchPad = ImageSketchpad(imageEl, { lineWidth: 5, lineMaxWidth: 10, lineColor: '#ff0000' });
| Name | Type | Description |
|---|---|---|
image |
HTMLImageElement |
Image html element. |
options? |
Partial<Options> |
Sketchpad options as javascript object. |
• Readonly canvas: Canvas
Canvas helper class.
▸ clear(): ImageSketchpad
Clears the image sketchpad.
▸ destroy(): void
Destroy the instance and remove the canvas.
void
▸ disable(): ImageSketchpad
Disables image sketchpad.
▸ download(originalSize?): Promise<string>
Download merged image with sketch as png file.
| Name | Type | Default value | Description |
|---|---|---|---|
originalSize |
boolean |
true |
Download image with original size. |
Promise<string>
▸ enable(): ImageSketchpad
Enables image sketchpad.
▸ loadJson(json): Promise<ImageSketchpad>
Load a sketch from a json string.
| Name | Type | Description |
|---|---|---|
json |
string |
JSON string to parse. |
Promise<ImageSketchpad>
▸ mergeImageWithSketch(originalSize?): Promise<string>
Merges image with sketch and returns a base64 string as promise.
| Name | Type | Default value | Description |
|---|---|---|---|
originalSize |
boolean |
true |
Download image with original size. |
Promise<string>
▸ redo(): ImageSketchpad
ReDo the last UnDone drawing on your sketch.
▸ setOptions(options): ImageSketchpad
Set sketchpad options.
| Name | Type | Description |
|---|---|---|
options |
Partial<Options> |
Sketchpad options. |
▸ toJson(): string
Get a json string which can be used to load a sketch again.
string
▸ toJsonAsync(): Promise<string>
Promise<string>
▸ undo(): ImageSketchpad
UnDo the last drawing on your sketch.