vue.js图片处理组件_Vue.js的Facebook头像图片组件

vue.js图片处理组件

Vue头像编辑器 (vue-avatar-editor)

Facebook like, avatar / profile picture component. This is Vue.js clone of mosch/react-avatar-editor

Facebook喜欢，头像/头像图片组成。 这是mosch / react-avatar-editor的Vue.js克隆

View demo 查看演示 Download Source 下载源

Resize, rotate and crop your uploaded image using a clear user interface.

使用清晰的用户界面调整大小，旋转和裁剪上传的图像。

安装 (Installation)

This is a Node.js module available through the npm registry.

这是可通过npm注册表使用的Node.js模块。

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

在安装之前，请下载并安装Node.js。 必须安装Node.js 0.10或更高版本。

Installation is done using the npm install command:

使用npm install命令完成安装：

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

Struts	类型	描述
宽度	数	编辑器的总宽度
高度	数	编辑器的总宽度
边境	数	裁剪边框。 图像将通过边框可见，但在生成的图像中被截断。
颜色	数[]	裁剪边框的颜色，格式为：[红色(0-255)，绿色(0-255)，蓝色(0-255)，字母(0.0-1.0)]
样式	目的	canvas元素的样式
规模	数	图像的比例尺。 您可以使用它来添加自己的调整大小滑块。
回转	数	图像的度数旋转。 您可以使用它来添加自己的旋转滑块。

访问生成的图像 (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.

无论编辑器的大小如何，生成的图像将具有与原始图像相同的分辨率。 如果要在画布尺寸上调整图像大小，可以使用getImageScaled 。

this.$refs.vueavatar.getImageScaled()

翻译自: https://vuejsexamples.com/a-facebook-like-avatar-picture-component-for-vue-js/

vue.js图片处理组件