<image-crop-element>

This loads an image and creates a crop area that user can modify. An event is fired with x, y, width, and height as the crop area changes.

Polyfills for Custom Elements, and Reflect.construct are required. See polyfill.html.

Usage

Plain

<image-crop src="/avatar.jpg"></image-crop>

With loading state

<image-crop src="/avatar.jpg">
  <img src="spinner.gif" alt="" data-loading-slot>
</image-crop>

With autoupdate inputs

<image-crop src="/avatar.jpg">
  <input type="hidden" data-image-crop-input="x" name="x">
  <input type="hidden" data-image-crop-input="y" name="y">
  <input type="hidden" data-image-crop-input="width" name="width">
  <input type="hidden" data-image-crop-input="height" name="height">
</image-crop>

Listen to the change event

document.addEventListener('image-crop-change', function (event){
  console.log(
    'Crop area changed.',
    event.detail.x,
    event.detail.y,
    event.detail.width,
    event.detail.height
  )
})