Kendraio Image Tagger

Kendraio Image Tagger component wrapped as a web component using Angular Elements. Can be used independently of Angular.

Work in progress, TODO:

• expose the tag preview component
• expose default settings (tag size, etc)

Demo

Online demo available at CODEPEN

Installation

To install from NPM use:

npm install --save @kendraio/image-tagger

Or, include the compiled JS directly into your HTML by adding a script tag:

<script src="https://unpkg.com/@kendraio/image-tagger/main-es2015.js" type="module"></script>

Usage

Add the component to your HTML markup:

<kendraio-image-tagger src="/assets/example-image.jpg" alt="Example Image"></kendraio-image-tagger>

And then listen to the tagsChanged event to get the updated list of tags:

const tagger = document.querySelector('kendraio-image-tagger');
tagger.addEventListener('tagsChanged', (event) => {
  console.log(`tagsChanged:`, event.detail);
});

You can set the default list of tags by setting the tags property on the custom element.