github / image-crop-element Goto Github PK

View Code? Open in Web Editor NEW

175.0 212.0 24.0 2.6 MB

A custom element for cropping a square image. Returns x, y, width, and height.

Home Page: https://github.github.io/image-crop-element/examples/

License: MIT License

JavaScript 16.89% TypeScript 83.11%

image-cropper image-crop custom-elements web-components

image-crop-element's Introduction

<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-crop src="/avatar.jpg"></image-crop>

Rounded crop area

<image-crop src="/avatar.jpg" rounded></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
  )
})

CSS encapsulation

The elements HTML structure is initialized in a Shadow 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 native custom element support require a polyfill. Legacy browsers require various other polyfills. See examples/index.html for details.

Chrome
Firefox
Safari
Microsoft Edge

image-crop-element's People

Contributors

Stargazers

Watchers

image-crop-element's Issues

Wrong Demo URL

https://muan.github.io/image-crop-element/ => https://github.github.io/image-crop-element/

CSS Parts

Any thoughts on adding some part markup to make the component more styleable?

Make sure box can be seen on a white image

Custom Elements v1

It looks like <image-crop> is using the old Custom Elements v0 API. This version was only implemented by Chrome. We should move to the new v1 API. That should make things start working in Safari.

It will look more like:

class ImageCropElement extends HTMLElement {
  constructor() {
    // ...
  }

  connectedCallback() {
    // ...
  }
}

window.customElements.define('image-crop', ImageCropElement)

https://developers.google.com/web/fundamentals/web-components/customelements

Support for non square crops

The component works great, but I'd like to be able to set a custom aspect ratio for the crop. This is currently not possible, right? Or am I missing an option?

Shane wants to crop a image

Hi it’s Shane Seyhan Rohde How do I flip it over

How

Hack. With jio internet +917889842710 please tower full hack with unlimited help me redmi 9a

          Hack. With jio internet +917889842710 please tower full hack with unlimited help me  redmi 9a

Originally posted by @imranmaa in github/dotnet-codespaces#16 (comment)

It's possible to see the edges of the shaded crop-outline area

Demo, recorded against https://github.github.io/image-crop-element/examples/

It's possible to get into a state where you can see the edge of the shaded area.

Implement pinch to zoom

On mobile devices, it's a bit hard to crop the image by moving the circle anchors. We should implement "pinch to zoom" or some other functionality to make this easier for touch users.

Example page: crop box "jumps"

This may be a known issue with the example page. If it's not worth fixing please feel free to close. At first I thought there was something wrong with the component but it only manifests when the image crop inputs are visible- the updateDimensions logic doesn't account for the height offset they cause.

CleanShot.2024-03-11.at.10.29.32.mp4

Cropper dragging doesn't work on touch devices

If you goto the demo page https://github.github.io/image-crop-element/examples/ and turn on chrome mobile view, you can't drag the cropper around to crop the image.