https://github.com/interactivetraining/image-editor

:camera: Interactive.Training Component: image-editor
https://github.com/interactivetraining/image-editor

browser-based image-editor jimp stenciljs web-component

Last synced: 3 months ago
JSON representation

:camera: Interactive.Training Component: image-editor

• Host: GitHub
• URL: https://github.com/interactivetraining/image-editor
• Owner: InteractiveTraining
• Created: 2019-07-03T12:26:00.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2020-09-03T11:12:56.000Z (over 5 years ago)
• Last Synced: 2025-02-26T21:37:11.015Z (11 months ago)
• Topics: browser-based, image-editor, jimp, stenciljs, web-component
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/@interactivetraining/image-editor
• Size: 14.6 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

          
![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square)

# Demo

[codepen](https://codepen.io/adamlacombe/full/qzKMXZ)

# Example

```html

```

# Example 2

```html

```

```javascript

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());

}

```