Ninety-nine Pitchers of Malt

    img-cropper

    0.4.0 • Public • Published

    ImageCropper

    Bower NPM Downloads

    Installation

    # Via NPM 
    $ npm i img-cropper
     
    # Via Bower 
    $ bower i img-cropper

    Usage

    const ImageCropper = require('img-cropper');
     
    const cropper = ImageCropper.create({
      container: document.getElementById('cropper'),
      onCrop: cropData => {
        canvasPreview.getContext('2d').drawImage(cropData.getCanvas(), 0, 0, 200, 200);
      },
    });

    Documents

    • function ImageCropper.create(options)

      options have properties below:

      • container: Required

        DOM element to contain the cropper. The cropper will be intialized with the width and height of its container if no width and height is explicitly defined.

      • width (Optional)

        Maximum width of the cropper. If not defined, container.clientWidth will be used.

      • height (Optional)

        Maximum height of the cropper. If not defined, container.clientHeight will be used.

      • minHeight (Optional)

        Minimum height of the cropping rect, default as 5.

      • ratio (Optional)

        The width / height ratio, default as 1, 0 stands for unlimited.

      • directions (Optional)

        An array of resizer directions, default as ['nw', 'ne', 'sw', 'se'].

      • onCrop (Optional)

        Function called with cropData when cropped image is updated.

      • debounce (Optional)

        Either 'mouseup' or the number of time in milliseconds to debounce the onCrop call.

      Returns an object with properties below:

      • function reset(sourceImage, (optional) cropRect, (optional) callback)

        sourceImage can be , , Blob or URL string.

        cropRect can be an object with optional x, y, width, height properties.

        callback will be called with a cachable if specified.

      • function setRatio(ratio)

      • function setDebounce(debounce)

        debounce is the same as in options.

      • function setRect(cropRect)

        Modify the crop rect manually, the same as in reset.

    Install

    npm i img-cropper

    DownloadsWeekly Downloads

    18

    Version

    0.4.0

    License

    MIT

    Last publish

    Collaborators

    • gera2ld