https://github.com/pespantelis/vue-crop

:left_right_arrow: Crop directive for Vue.js
https://github.com/pespantelis/vue-crop

Last synced: about 2 months ago
JSON representation

:left_right_arrow: Crop directive for Vue.js

• Host: GitHub
• URL: https://github.com/pespantelis/vue-crop
• Owner: pespantelis
• License: mit
• Archived: true
• Created: 2015-08-05T14:51:28.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2018-06-23T02:37:15.000Z (about 6 years ago)
• Last Synced: 2024-02-17T20:35:11.127Z (4 months ago)
• Language: JavaScript
• Homepage: http://pespantelis.github.io/vue-crop
• Size: 186 KB
• Stars: 275
• Watchers: 7
• Forks: 19
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• awesome-stars - vue-crop - :left_right_arrow: Crop directive for Vue.js (JavaScript)

README

        
# VueCrop

> Crop events plugin for Vue.js 1.0

This is a directive for Jcrop 2.0.0.

See a live demo [here](http://pespantelis.github.io/vue-crop/).

## Usage

### Install via npm

Available through npm as `vue-crop`.

```

npm install --save vue-crop

```

### Direct include

You can include it with a `` tag when you have Vue itself included globally. It will automatically install itself, and will add a global `VueCrop`.

## Use in templates

Then you can do this:

``` html

<img src="pic.jpg" width="600" height="400" v-crop:start="cropStart"/>

```

> You should specify both the `height` and `width` attributes

See [Jcrop documentation](http://jcrop.org/doc/events) for all available events.

## Set options

``` js

VueCrop.setOptions({

  setSelect: [10, 10, 100, 100],

  aspectRatio: 1,

  bgColor: 'red'

})

```

See [Jcrop documentation](http://jcrop.org/doc/options) for all available options.

## License

VueCrop is released under the MIT Licence. See the bundled LICENSE file for details.