JSPM – itl-drawer@1.0.6

Package Exports

itl-drawer
itl-drawer/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (itl-drawer) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Plugin of drawing editor for web application

How to use

Step 1: Import javascript file

<script type="text/javascript" src="path_to/drawer-widget.js"></script>

Step 2: Add HTML

<div style="height: 500px">
  <itl-drawer></itl-drawer>
</div>

Supported functions

const drawer = document.querySelector('itl-drawer');

1. setDrawerOptions(options: DrawerOptions)

Set drawer options

export interface DrawerOptions {
    imagePasteRatio?: number;
    viewOnly?: boolean;
    language?: 'en' | 'vi' | 'fr';
}

imagePasteRatio

Set maximum size of image when pasting to drawer
Default = 0.75, ratio with container
Set = 0 to keep original image size

viewOnly

Set drawer is view only or editable
Default = false

2. loadObjects(json)

Load canvas objects from JSON objects

const json = {objects: [....]}

drawer.loadObjects(json);

3. pasteImage(img)

Draw image from clipboard

document.onpaste = function(event){
  var items = (event.clipboardData || event.originalEvent.clipboardData).items;
  
  for (index in items) {
    var item = items[index];
    
    if (item.kind === 'file') {
      var blob = item.getAsFile();   

      drawer.pasteImage(blob);
    }
  }
}

4. addAudio(audio: File | string)

Add audio file to drawer

const audio = new File([], 'myaudio.wav');
// OR
const audio = 'path/to/audio.wav';

drawer.addAudio(audio);

4. getAsObjects() : JSON

Get canvas data as JSON objects

const canvasData = drawer.getAsObjects();

5. getAsImageData(options?: ImageDataOptions) : string base64

Get canvas data as image data

export interface ImageDataOptions {
  keepOriginalSize?: boolean;
  paddingContent?: number;
}

keepOriginalSize

Keep drawer original size
Default = false

paddingContent

Only if keepOriginalSize = false
Crop an image bounding only drew objects with a padding
Default = 30 (px)

Supported events

1. imageAddClick

drawer.addEventListener('imageAddClick', () => {
});

2. audioAddClick

drawer.addEventListener('audioAddClick', () => {
});

3. audioDbClick

drawer.addEventListener('audioDbClick', (event) => {
  console.log(event.detail) // audioUrl here
});

4. hasChange

drawer.addEventListener('hasChange', (event) => {
  console.log(event.detail)
});

itl-drawer