Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jofftiquez/vue-croppie
Vue wrapper for croppie
https://github.com/jofftiquez/vue-croppie
crop crop-image croppie hacktoberfest javascript vue vuejs vuejs2
Last synced: 5 days ago
JSON representation
Vue wrapper for croppie
- Host: GitHub
- URL: https://github.com/jofftiquez/vue-croppie
- Owner: jofftiquez
- License: mit
- Created: 2017-06-29T11:00:05.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2024-05-20T10:06:59.000Z (7 months ago)
- Last Synced: 2024-10-01T10:21:29.163Z (2 months ago)
- Topics: crop, crop-image, croppie, hacktoberfest, javascript, vue, vuejs, vuejs2
- Language: HTML
- Homepage: https://jofftiquez.github.io/vue-croppie/
- Size: 1.13 MB
- Stars: 260
- Watchers: 8
- Forks: 42
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-pinoy-made - Github
README
# VueCroppie
[](https://gitter.im/vue-croppie/Lobby?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) 
VueCroppie is a [Vue](https://vuejs.org/) 2 wrapper for [Croppie](https://foliotek.github.io/Croppie/) a beautiful photo cropping tool for Javascript by [foliotek](http://www.foliotek.com/).
If you like this project, please give it a star, and consider following the author. :)
# Installation
### NPM
```bash
npm install vue-croppie --save
```
### CDN
`https://unpkg.com/vue-croppie/dist/vue-croppie.js`
### Usage with a bundler
TO use VueCroppie with Webpack, Parcel or other bundler
```js
import Vue from 'vue';
import VueCroppie from 'vue-croppie';
import 'croppie/croppie.css' // import the croppie css manually
Vue.use(VueCroppie);
```
### Usage in Browser directly
```html
...
const vm = new Vue({...});
```
# Sample
This sample below will produce [this](https://jofftiquez.github.io/vue-croppie/).
```vue
![]()
Bind
Rotate Left
Rotate Right
Crop Via Callback
Crop Via Event
export default {
mounted() {
// Upon mounting of the component, we accessed the .bind({...})
// function to put an initial image on the canvas.
this.$refs.croppieRef.bind({
url: 'http://i.imgur.com/Fq2DMeH.jpg',
})
},
data() {
return {
cropped: null,
images: [
'http://i.imgur.com/fHNtPXX.jpg',
'http://i.imgur.com/ecMUngU.jpg',
'http://i.imgur.com/7oO6zrh.jpg',
'http://i.imgur.com/miVkBH2.jpg'
]
}
},
methods: {
bind() {
// Randomize cat photos, nothing special here.
let url = this.images[Math.floor(Math.random() * 4)]
// Just like what we did with .bind({...}) on
// the mounted() function above.
this.$refs.croppieRef.bind({
url: url,
});
},
// CALBACK USAGE
crop() {
// Here we are getting the result via callback function
// and set the result to this.cropped which is being
// used to display the result above.
let options = {
format: 'jpeg',
circle: true
}
this.$refs.croppieRef.result(options, (output) => {
this.cropped = output;
});
},
// EVENT USAGE
cropViaEvent() {
this.$refs.croppieRef.result(options);
},
result(output) {
this.cropped = output;
},
update(val) {
console.log(val);
},
rotate(rotationAngle) {
// Rotates the image
this.$refs.croppieRef.rotate(rotationAngle);
}
}
}
```
### File Upload Sample
You can upload file instead of using direct image link.
*Usage*
In your form add a `file input` along with `vue-croppie` component.
```vue
![]()
Crop
export default {
data() {
return {
croppieImage: '',
cropped: null
};
},
methods: {
croppie (e) {
var files = e.target.files || e.dataTransfer.files;
if (!files.length) return;
var reader = new FileReader();
reader.onload = e => {
this.$refs.croppieRef.bind({
url: e.target.result
});
};
reader.readAsDataURL(files[0]);
},
crop() {
// Options can be updated.
// Current option will return a base64 version of the uploaded image with a size of 600px X 450px.
let options = {
type: 'base64',
size: { width: 600, height: 450 },
format: 'jpeg'
};
this.$refs.croppieRef.result(options, output => {
this.cropped = this.croppieImage = output;
console.log(this.croppieImage);
});
}
}
};
```
### Using Options
All [Croppie options](https://foliotek.github.io/Croppie/) were converted to props to be able use them in the `vue-croppie` component.
*Usage*
```html
<vue-croppie
ref=croppieRef
:enableOrientation="true"
:mouseWheelZoom="false"
:viewport="{ width: 200, height: 200, type: 'circle' }"
@result="fn"
>
</vue-croppie>
```
# API
All of the properties and methods are based on [Croppie documentation](https://foliotek.github.io/Croppie/). All property and method names are `"==="` the same if you know what I mean.
Except for these few things below.
| Option | Type | Default | Description |
|--------|------|---------|-------------|
| `ref` (required) | `Object` | `none` | `ref` is used to create a reference to the child component, in order to have access to it's methods and properties. Specific example is to access the `result()` function of `vue-croppie` from outside the component. |
| `resultType` | `String` | `base64` | The image encoding of the cropped image via `result()`. Also available in [Croppie Documentation](https://foliotek.github.io/Croppie/). |
| `customClass` | `String` | `none` | You can pass a custom class or classes to the `props` `customClass` like `customClass="class1 class2 class3"` |
# Events
| Option | Type | Usage | Description |
|--------|------|---------|-------------|
| `update` | function | `@update="fn"` | Gets triggered when the croppie element has been zoomed, dragged or cropped |
| `result` | function | `@result="fn"` | Gets triggered when the image has been cropped. Returns the cropped image. |
| `croppieInitialized` | function | `@croppieInitialized="fn"` | Gets triggered when the croppie gets initialized. |
*Note:*
`@result` event is only available if **NO callback function was passed** to `this.$refs.croppieRef.result({})`. See [here](https://github.com/jofftiquez/vue-croppie/blob/3046d96588ccc992d23f9a541eddd504326946d0/src/index.js#L104)
# FAQ
**How to clear/destroy coppie?**
I added a new method called `refresh()` and can be used as `this.$refs.croppieRef.refresh()`, but the croppie instance is now being refreshed automatically after every `crop()` invocation.
*Helpful links*
[#358](https://github.com/Foliotek/Croppie/issues/352) - Official croppie page.
# Updates
**1.3.0 - Aug 16, 2017**
- Added webpack build
- Fixes #5
- Fixes #14
**1.2.5 - Aug 12, 2017**
- Cropped image output can now be retrieve via vue event.
- Added `result` event.
- Added `updated` event.
**1.2.3**
- Added automatic refreshing of `croppie` instance after every `crop()` invocation.
- New method `refresh()` which destroys and re-create the croppie instance.
**1.2.x**
- Result options are now being passed through the `this.$refs.croppieRef.result(options, callback)`.
# License
### MIT
Use and abuse at your own risk.
`</p>` with ❤️ by Jofferson Ramirez Tiquez