Vuejs-Vue avatar editor v1.0.4: vue-avatar-editor - Resize, rotate and crop your uploaded avatar using a clear user interface.

icon
Latest Release: v1.0.4

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 module available through the npm registry.

Before installing, download and install Node.js. Node.js 0.10 or higher is required.

Installation is done using the npm install command:

$ npm install vue-avatar-editor-improved

Usage

<div id="app">
      <vue-avatar
      :width=400
      :height=400
      :rotation="rotation"
      :scale="scale"
      ref="vueavatar"
      @vue-avatar-editor:image-ready="onImageReady"
      >
    </vue-avatar>
    <br>
    <input
      type="range"
      min=1
      max=3
      step=0.02
      :value='scale'
    />
    <input
      type="range"
      min=1
      max=3
      step=0.02
      :value='rotation'
    />
    <br>
    <button v-on:click="saveClicked">Click</button>
    <br>
    <img ref="image">
</div>
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.

Accessing the resulting image

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.

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)

Comments

  • Nuxt compatibility
    Nuxt compatibility

    Jul 24, 2018

    I tried to make it nuxt compatible, it works, but i'm not that good with webpack, maybe there is a better way! Let me know :)

    Reply
  • Add method resetImage and emit imageLoaded
    Add method resetImage and emit imageLoaded

    Jul 23, 2019

                                                                                                                                                                                                           
    Reply
  • remove canvas style
    remove canvas style

    Jan 11, 2019

    its override component props & add a global style to all canvas

    Reply
  • #1 Files are now being emitted from vue avatar to editor.
    #1 Files are now being emitted from vue avatar to editor.

    Sep 25, 2018

                                                                                                                                                                                                           
    Reply
  • Add missing LICENSE file
    Add missing LICENSE file

    Aug 30, 2018

    Made a PR because issues are closed.

    Going back to the original project it was licensed under MIT and this was later probably lost during the multiple forkings. I've readded the license and added copyright for you and the previous repositories.

    Reply
  • emit event on 'drag'
    emit event on 'drag'

    Feb 15, 2021

                                                                                                                                                                                                           
    Reply
  • Better mouse and touch events management
    Better mouse and touch events management

    Mar 15, 2018

    Moving avatar can be done from outside from the image. Moving avatar can be done by touch events.

    Reply