Skip to content
♻️ Cycle.js component for https://github.com/fengyuanchen/cropperjs
TypeScript JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
.gitignore
.npmignore
CODE_OF_CONDUCT.md
LICENSE
README.md
index.d.ts
package.json
tsconfig.json
tslint.json
webpack.config.js
yarn.lock

README.md

cycle-cropper

npm version Libraries.io dependency status for GitHub repo npm bundle size npm GitHub

cycle-cropper is component for cropper.js

Usage

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

You can’t perform that action at this time.