Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 260 Commits
.github/workflows		.github/workflows
examples		examples
src		src
test		test
.eslintrc.json		.eslintrc.json
.gitattributes		.gitattributes
.gitignore		.gitignore
CODEOWNERS		CODEOWNERS
LICENSE		LICENSE
custom-elements.json		custom-elements.json
package-lock.json		package-lock.json
package.json		package.json
readme.md		readme.md
tsconfig.json		tsconfig.json
web-test-runner.config.js		web-test-runner.config.js

Repository files navigation

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

Installation

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

Usage

Plain

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

Rounded crop area

<image-cropsrc="/avatar.jpg"rounded></image-crop>

With loading state

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

With autoupdate inputs

<image-cropsrc="/avatar.jpg"><inputtype="hidden"data-image-crop-input="x"name="x"><inputtype="hidden"data-image-crop-input="y"name="y"><inputtype="hidden"data-image-crop-input="width"name="width"><inputtype="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)})

CSS encapsulation

The elements HTML structure is initialized in aShadow DOM, so it is impossible to apply CSS to it. If you need to change the element's default style for any reason, you should open up a new issue (or a pull request!), describing your use case, and we'll work with you on solving the problem.

Browser support

Browsers without nativecustom element support require apolyfill. Legacy browsers require various other polyfills. Seeexamples/index.html for details.