https://github.com/unhappychoice/cycle-cropper

:recycle: Cycle.js component for https://github.com/fengyuanchen/cropperjs
https://github.com/unhappychoice/cycle-cropper

cropper cropperjs cycle-cropper cyclejs image typescript

Last synced: 4 months ago
JSON representation

:recycle: Cycle.js component for https://github.com/fengyuanchen/cropperjs

• Host: GitHub
• URL: https://github.com/unhappychoice/cycle-cropper
• Owner: unhappychoice
• License: mit
• Created: 2017-11-24T17:03:49.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2025-04-08T04:04:01.000Z (6 months ago)
• Last Synced: 2025-05-18T22:07:24.518Z (5 months ago)
• Topics: cropper, cropperjs, cycle-cropper, cyclejs, image, typescript
• Language: TypeScript
• Homepage:
• Size: 344 KB
• Stars: 7
• Watchers: 2
• Forks: 3
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

          
# cycle-cropper

[![npm version](https://badge.fury.io/js/cycle-cropper.svg)](https://badge.fury.io/js/cycle-cropper)

[![Libraries.io dependency status for GitHub repo](https://img.shields.io/librariesio/github/unhappychoice/cycle-cropper.svg)](https://libraries.io/github/unhappychoice/cycle-cropper)

![npm bundle size](https://img.shields.io/bundlephobia/min/cycle-cropper.svg)

![npm](https://img.shields.io/npm/dt/cycle-cropper.svg)

![GitHub](https://img.shields.io/github/license/unhappychoice/cycle-cropper.svg)

cycle-cropper is component for [cropper.js](https://github.com/fengyuanchen/cropperjs)

### Usage

```typescript

import {CropperComponent} from "cycle-cropper";

const main = (sources: Sources): Sinks => {

    const imageInput$ = sources.DOM.select(".image");

    const cropperSinks = CropperComponent({

        DOM: sources.DOM,

        image$: imageInput$,

        props$: Stream.of({ aspectRatio: 1 }) // cropper options

    });

    const imageData$ = cropperSinks.crop$

        .compose(sampleCombine(cropperSinks.cropper$))

        .map(([_, cropper]) => cropper.getCroppedCanvas().toDataURL())

    const dom$ = Stream.of([p("Image Cropper")].concat(cropperSinks.DOM));

    return { DOM: dom$ };

};

run(main, {

    DOM: makeDOMDriver("#app")

});

```

### License

see [LICENSE](./LICENSE)