A custom element for cropping a square image. Returns x, y, width, and height.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples
test
.babelrc
.eslintrc.json
.gitignore
.nojekyll
.travis.yml
LICENSE
ams.jpg
index.css
index.js
package-lock.json
package.json
prettier.config.js
readme.md

readme.md

<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.

Installation

$ npm install --save @github/image-crop-element

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
  )
})