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.
$ npm install --save @github/image-crop-element
<image-crop src="/avatar.jpg"></image-crop>
<image-crop src="/avatar.jpg">
<img src="spinner.gif" alt="" data-loading-slot>
</image-crop>
<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>
document.addEventListener('image-crop-change', function (event){
console.log(
'Crop area changed.',
event.detail.x,
event.detail.y,
event.detail.width,
event.detail.height
)
})
Browsers without native custom element support require a polyfill. Legacy browsers require various other polyfills. See examples/index.html
for details.
- Chrome
- Firefox
- Safari
- Microsoft Edge