Image Editor Custom Element

This is an embedded or standalone image editor using webassembly.

Supported transformations:

• Crop
• Rotate (by 90°)
• Mirror
• Convert to grayscale
• Resize (0.1 - 2x)
• Draw
• Download (only standalone mode)

##Installation

Using npm:

npm i --save image-editor-custom-element

##Usage

###Standalone mode

####index.html

<image-editor 
    canvasWidth="500"
    canvasHeight="500"
    targetHeight="100"
    targetWidth="100"
></image-editor>

####index.ts

import 'image-editor-custom-element'

• canvasWidth: the width of the canvas
• canvasHeight: the height of the canvas
• targetWidth: the width of the target when cropping (it can be changed in the editor)
• targetHeight: the height of the target when cropping (it can be changed in the editor)

###Embedded mode

####index.html

<image-editor 
    id="editor"
    canvasWidth="500"
    canvasHeight="500"
    targetHeight="100"
    targetWidth="100"
    isEmbedded="true"
></image-editor>

• canvasWidth: the width of the canvas
• canvasHeight: the height of the canvas
• targetWidth: the width of the target when cropping
• targetHeight: the height of the target when cropping
• isEmbedded: switch functionality between embedded and standalone

####index.ts

import 'image-editor-custom-element'

const editor = document.getElementById('editor');

editor.addEventListener('imageSaved', (event: CustomEvent) => {
    const imageData: ImageData = event.detail.imageData;
    const canvas = document.createElement('canvas');
    canvas.width = imageData.width;
    canvas.height = imageData.height;
    canvas.getContext('2d').putImageData(imageData, 0 , 0);
    document.body.appendChild(canvas);
});

The imageSaved event is fired when the user selected, and submitted a cropped image. The event details contains the image. The following interface describes the event detail:

interface eventPayload {
  imageData: ImageData;
}