Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fpluquet/vue-avatar-editor
Avatar editor for Vue.js. Demo on : https://fpluquet.github.io/vue-avatar-editor/
https://github.com/fpluquet/vue-avatar-editor
avatar canvas2image js rotation scale vue-components vuejs2
Last synced: 2 months ago
JSON representation
Avatar editor for Vue.js. Demo on : https://fpluquet.github.io/vue-avatar-editor/
- Host: GitHub
- URL: https://github.com/fpluquet/vue-avatar-editor
- Owner: fpluquet
- License: mit
- Fork: true (two20/vue-avatar-editor)
- Created: 2017-07-10T18:57:17.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2021-09-09T10:50:24.000Z (almost 3 years ago)
- Last Synced: 2024-03-23T17:01:50.434Z (3 months ago)
- Topics: avatar, canvas2image, js, rotation, scale, vue-components, vuejs2
- Language: Vue
- Homepage:
- Size: 1 MB
- Stars: 92
- Watchers: 5
- Forks: 26
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Lists
- awesome-vue - vue-avatar-editor - Resize, rotate and crop your uploaded avatar using a clear user interface. (Components & Libraries / UI Components)
- awesome-vue - vue-avatar-editor - Resize, rotate and crop your uploaded avatar using a clear user interface. (Components & Libraries / UI Components)
- awesome-vue - vue-avatar-editor - Resize, rotate and crop your uploaded avatar using a clear user interface. (Components & Libraries / UI Components)
- awesome-vue - vue-avatar-editor - Resize, rotate and crop your uploaded avatar using a clear user interface. (Components & Libraries / UI Components)
- awesome-vue - vue-avatar-editor - Resize, rotate and crop your uploaded avatar using a clear user interface. (Components & Libraries / UI Components)
- awesome-vue - vue-avatar-editor - Resize, rotate and crop your uploaded avatar using a clear user interface. (Components & Libraries / UI Components)
- awesome-vue - vue-avatar-editor - Resize, rotate and crop your uploaded avatar using a clear user interface. (Components & Libraries / UI Components)
- awesome-vue - vue-avatar-editor - Resize, rotate and crop your uploaded avatar using a clear user interface. (Components & Libraries / UI Components)
- awesome-vue - vue-avatar-editor - Resize, rotate and crop your uploaded avatar using a clear user interface. (Components & Libraries / UI Components)
- awesome-vue - vue-avatar-editor - Avatar editor for Vue.js. Demo on : https://fpluquet.github.io/vue-avatar-editor/ (UI Components [🔝](#readme))
- awesome-vue - vue-avatar-editor - Resize, rotate and crop your uploaded avatar using a clear user interface. (UI Components / Miscellaneous)
- awesome-vue - vue-avatar-editor - Resize, rotate and crop your uploaded avatar using a clear user interface. (UI Components / Miscellaneous)
- awesome-vue - vue-avatar-editor - Resize, rotate and crop your uploaded avatar using a clear user interface. (Components & Libraries / UI Components)
- awesome-vue - vue-avatar-editor ★33 - Resize, rotate and crop your uploaded avatar using a clear user interface. (UI Components / Miscellaneous)
- my-awesome-stars - fpluquet/vue-avatar-editor - Avatar editor for Vue.js. Demo on : https://fpluquet.github.io/vue-avatar-editor/ (Vue)
README
# vue-avatar-editor
Facebook like, avatar / profile picture component. This is Vue.js clone of mosch/react-avatar-editor
Resize, rotate and crop your uploaded image using a clear user interface.
Demo at https://fpluquet.github.io/vue-avatar-editor/
# Installation
This is a [Node.js](https://nodejs.org/en/) module available through the
[npm registry](https://www.npmjs.com/).Before installing, [download and install Node.js](https://nodejs.org/en/download/).
Node.js 0.10 or higher is required.Installation is done using the
[`npm install` command](https://docs.npmjs.com/getting-started/installing-npm-packages-locally):```bash
$ npm install vue-avatar-editor-improved
```# Usage
```html
Click
![]()
``````javascript
import Vue from 'vue'
import {VueAvatar} from 'vue-avatar-editor-improved'let vm = new Vue({
el: '#app',
components: {
VueAvatar,
VueAvatarScale
},
data () {
return {
rotation: 0,
scale: 1
};
},
methods: {
saveClicked () {
var img = this.$refs.vueavatar.getImageScaled()
this.$refs.image.src = img.toDataURL()
},
onImageReady () {
this.scale = 1
this.rotation = 0
}
}
})
```## Props
| Prop | Type | Description
| ---------------------- | -------- | ---------------
| width | Number | The total width of the editor
| height | Number | The total width of the editor
| border | Number | The cropping border. Image will be visible through the border, but cut off in the resulting image.
| color | Number[] | The color of the cropping border, in the form: [red (0-255), green (0-255), blue (0-255), alpha (0.0-1.0)]
| style | Object | Styles for the canvas element
| scale | Number | The scale of the image. You can use this to add your own resizing slider.
| rotation | Number | The rotation in degrees of the image. You can use this to add your own rotating slider.
| accept | String | Types of accepted files (accept props in file input). Default `image/*`. Exemplary other value `image/png, image/jpeg`.
| placeholderSvg | String | Content of svg file for placeholder image## Accessing the resulting image
```javascript
this.$refs.vueavatar.getImage()
```The resulting image will have the same resolution as the original image, regardless of the editor's size.
If you want the image sized in the dimensions of the canvas you can use `getImageScaled`.```javascript
this.$refs.vueavatar.getImageScaled()
```# Contributing
For development you can use following build tools:
* `npm run build`: Builds the *minified* dist file: `dist/index.js`
* `npm run dev`: Watches for file changes and builds *unminified* into: `dist/index.js`
localhost:8080)