Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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: 28 days ago
JSON representation

Vue wrapper for croppie

Awesome Lists containing this project

README

        

# VueCroppie

[![Join the chat at https://gitter.im/vue-croppie/Lobby](https://badges.gitter.im/vue-croppie/Lobby.svg)](https://gitter.im/vue-croppie/Lobby?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) Buy Me A Coffee donate button


NPM

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