Neural Processing Mechanisms

    @github/image-crop-element
    TypeScript icon, indicating that this package has built-in type declarations

    5.0.0 • Public • Published

    <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

    Install

    npm i @github/image-crop-element

    DownloadsWeekly Downloads

    999

    Version

    5.0.0

    License

    MIT

    Unpacked Size

    16.4 kB

    Total Files

    5

    Last publish

    Collaborators

    • jfuchs
    • githubbot
    • manuelpuyol
    • jonrohan
    • broccolini
    • mislav
    • mdo
    • primer-css
    • keithamus
    • mschoening
    • koddsson
    • emilybrick
    • lgarron
    • colebemis
    • smockle
    • simurai
    • khiga8
    • dustin.greif
    • srt32