cycle-cropper

KO | EN

gitlite — search

#javascript #hacktoberfest #ai #go #machine-learning #deep-learning #linux #docker #macos #vue #security #ios #openai #open-source

(★ 9)

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

cycle-cropper 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

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

cycle-cropper

cycle-cropper 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

cycle-cropper

cycle-cropper 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README