Neo's Personal Matrix

    vue-cropperjs
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/vue-cropperjs package

    5.0.0 • Public • Published

    vue-cropperjs

    A Vue wrapper component for cropperjs.

    NPM

    Demo

    Checkout here agontuk.github.io/vue-cropperjs

    Installation

    npm install --save vue-cropperjs

    or

    yarn add vue-cropperjs
    

    You will also need css & style loader for webpack

    Compatibility

    Vue Version Package Version
    3.x.x >=5.0.0
    2.x.x 4.2.0
    1.x.x 1.0.3

    Usage

    // Global
    import Vue from 'vue';
    import VueCropper from 'vue-cropperjs';
    import 'cropperjs/dist/cropper.css';
    Vue.component(VueCropper);
    
    // Local
    import VueCropper from 'vue-cropperjs';
    import 'cropperjs/dist/cropper.css';
    export default {
      components: { VueCropper}
    }
    
    ...
    <vue-cropper
      ref="cropper"
      :src="imgSrc"
      alt="Source Image"
      @ready="..."
      @cropstart="..."
      @cropmove="..."
      @cropend="..."
      @crop="..."
      @zoom="..."
    >
    </vue-cropper>
    ...
    
    this.$refs.cropper.rotate(45);

    See the example files & cropperjs documentation

    Options

    Name Type Required Description
    src string -- Image source
    containerStyle object -- Styling for the image container
    imgStyle object -- Styling for the image
    alt string -- Alternate text for the image

    Crop related options

    See cropperjs documentation for all posible options & methods.

    Renamed Methods

    • relativeZoom from zoom
    • initCrop from crop

    License

    MIT

    Install

    npm i vue-cropperjs

    DownloadsWeekly Downloads

    53,817

    Version

    5.0.0

    License

    MIT

    Unpacked Size

    19.9 kB

    Total Files

    7

    Last publish

    Collaborators

    • agontuk