@interactivetraining/image-editor

Demo

codepen

Example

<script src='https://unpkg.com/@interactivetraining/image-editor@latest/dist/it-image-editor.js'></script>
<it-image-editor></it-image-editor>

Example 2

<script src='https://unpkg.com/@interactivetraining/image-editor@latest/dist/it-image-editor.js'></script>

function addImageEditor() {
  const editor = document.createElement('it-image-editor');
  editor.addEventListener('save', (e) => {
    console.log('save image', e.detail);
    
    const image = new Image();
    image.src = e.detail.base64;
    window.open("", '_blank').document.write(image.outerHTML);
  });
  document.body.appendChild(editor);
}

if (document.readyState === "interactive") {
  addImageEditor();
} else {
  document.addEventListener('DOMContentLoaded', () => addImageEditor());
}