- Notifications
You must be signed in to change notification settings - Fork0
😍 Vue.js 💪 awesome-avatar
NotificationsYou must be signed in to change notification settings
NarHakobyan/awesome-vue-avatar
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Facebook like, avatar / profile picture component.
Resize, rotate and crop your uploaded image using a clear user interface.
Demo athttps://narhakobyan.github.io/awesome-vue-avatar/
This is aNode.js module available through thenpm registry.
Before installing,download and install Node.js.Node.js 4.0 or higher is required.
Installation is done using thenpm install command:
$ npm install awesome-vue-avatar
<divid="app"><vue-avatar:width=400:height=400:rotation="rotation"placeholder: "base64Image" :scale="scale"ref="vueavatar"@image-ready="onImageReady"></vue-avatar><br><inputtype="range"min=1max=3step=0.02v-model.number='scale'/><inputtype="range"min=1max=3step=0.02v-model.number='rotation'/><br><buttonv-on:click="saveClicked">Click</button><br><imgref="image"></div>
importVuefrom'vue'import{VueAvatar}from'awesome-vue-avatar'letvm=newVue({el:'#app',components:{ VueAvatar, VueAvatarScale},data(){return{rotation:0,scale:1};},methods:{saveClicked(){varimg=this.$refs.vueavatar.getImageScaled()this.$refs.image.src=img.toDataURL()},onImageReady(){this.scale=1this.rotation=0}}})
| 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. |
| placeholder | String | Placeholder url (base64) |
this.$refs.vueavatar.toDataUrl()
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 usegetImageScaled.
this.$refs.vueavatar.getImageScaled()
For development you can use following build tools:
yarn install: Install required dependencies.yarn serve: Start development server.- Commit and push your changes
- Open pull-request