vue-avatar-editor-improved

    1.0.7 • Public • Published

    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.
    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

    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)

    Keywords

    none

    Install

    npm i vue-avatar-editor-improved

    DownloadsWeekly Downloads

    2,888

    Version

    1.0.7

    License

    MIT

    Unpacked Size

    50.4 kB

    Total Files

    32

    Last publish

    Collaborators

    • fpluquet