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克隆
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图片处理组件