Avatar editor for Vue.js. Demo on : https://fpluquet.github.io/vue-avatar-editor/

Overview

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)
You might also like...
Vue.js demo that uses NASA API "Astronomy Photo of the Day".

nasa-demo Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build Lints

demo-vue-product-ecommerdemo

demo-vue Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build Lints

Demo vue.js app to show Alchemy NFT API

A simple vue.js app made to play with Alchemy API

Pathfinding demo on the XRP Ledger in an Vue (Typescript) project

XRP Ledger pathfinding-demo XRPL Pathfinding Demo: select destination account & currency, select source account and see avilable payment options using

A quick demo on how to set up and use Vuex to create a events messaging system

A quick demo on how to set up and use Vuex to create a events messaging system

Nuxtjs-case - nuxt.js demo

nuxt-demo Build Setup # install dependencies $ npm install # serve with hot reload at localhost:3000 $ npm run dev # build for production and launch

Vue Component to Make Google Material Design Ripple Effect. http://bosnaufal.github.io/vue-ripple/

Vue Ripple Vue Component to Make Google Material Design Ripple Effect. It's adopted from angular-ripple DEMO Install You can import vue-ripple to your

Vue component for GitHub ribbons
Vue component for GitHub ribbons

Did you develop a Vue application hosted on GitHub? Add this Vue component for embedding a GitHub fork ribbon on it! vue-ribbon is a Vue Single File C

GitHub Corners for Vue.

Vue GitHub Corners tholman's GitHub Corners for Vue. Installation Via npm: npm install --save vue-gh-corners Via Yarn: yarn add vue-gh-corners Demo Go

Comments
  • Bugfix: Opening the Image Selection Dialog does not work on some Android Devices

    Bugfix: Opening the Image Selection Dialog does not work on some Android Devices

    This Pull Request fixes an issue, where the click events for opening the Image Selector would not work on some Android Devices. This was due to preventing the default handling of touchstart events, which caused that the browser to always detected a touchmove event when releasing the finger. This Pull Request also contains some minor library updates, fixing some audit findings.

    opened by laberning 0
  • Add missing LICENSE file

    Add missing LICENSE file

    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.

    opened by ryanrigby17 0
Releases(v1.0.4)
Owner
null
Vue 2.x component based on embed.js https://github.com/ritz078/embed.js

vue-embed Embed component is based on embed.js for Vue 2.x. Embed.js is a lightweight JavaScript plugin to embed emojis, media, maps, tweets, code and

Thomas Marrec 61 Nov 21, 2022
Add a Github corner to your project page, This GitHub corner for Vue 3.0+ component.

@uivjs/vue-github-corners Add a Github corner to your project page, This GitHub corner for Vue 3.0+ component. Install npm i @uivjs/vue-github-corners

UI Vue 3 Sep 27, 2022
Awesome-github-profile - A website of awesome Github Profile READMEs

Awesome GitHub Profile README A website of awesome Github Profile READMEs ?? Lin

Uvacoder 16 May 25, 2022
An avatar component for vue.js

vue-avatar An avatar component for vue.js. This component display an avatar image and if none is provided fallback to the user initials. This componen

Elie 613 Oct 24, 2022
A simple and elegant letter avatar component for vue.js

vue-letter-avatar Introduction An elegant and easy to use letter avatar component for vue.js 2.0+ Install $ yarn add vue-letter-avatar or $ npm instal

null 62 May 24, 2022
Simple avatar generator Vue component for avataaars.

vuejs-avataaars Simple avatar generator Vue component for avataaars. [Demo] http://vuejs-avataaars.surge.sh/ avataaars designed by Pablo Stanley. Feat

Or Gordin 221 Nov 12, 2022
Vue live real-time avatar from your webcam in the browser.

Vitar Vue live real-time avatar from your webcam in the browser. Get Started Npm $ npm install @cloudgeek/vitar --save Yarn $ yarn add @cloudgeek/vita

Alex Liu 20 Oct 31, 2022
An avatar component for VueJS 2.0

VueAvatar Avatar component for VueJS 2 Use username to create letter avatar (up to 3 chars) If an image src is provided, will try to use it as avatar

Stéphane Boulard 13 Jul 28, 2020
Google-onetap-signin-client-vue - Vue 3 Demo of using the Google One-Tap Signin in a modular way (Client Code)

vue-google-onetap-signin Project setup npm install Compiles and hot-reloads for

Zensynthium 5 Oct 31, 2022
Demo of global event bus usage in vue

This is a quick example of how to use a global event bus to your advantage with vue-geb. Why ? I use a global event bus mainly to split my UI interact

null 6 Jul 17, 2018