vue 图片自适应排列插件_一款移动pc友好又强大的vue图片裁剪插件

vue-picture-cut 2.x

基于vue和typescript开发的一款图片剪裁处理工具

优点：原生、轻量、使用简单、功能全面、扩展性强

目前功能：缩放、翻折、旋转、边缘校验、矩形剪裁、任意(椭)圆剪裁

关于缩放：鼠标(鼠标滚轮缩放)、触屏(双指缩放)

一、使用方法

通过npm安装插件

npm install vue-picture-cut

在vue中使用

1、在main.js中全局引用

import Vue from 'vue';

import 'vue-picture-cut/lib/vue-picture-cut.css';

import VuePictureCut from 'vue-picture-cut';

Vue.use(VuePictureCut);

2、或者在.vue文件中单独引用

import { VuePictureCut } from 'vue-picture-cut';

export default {

// ...

components: {

VuePictureCut

},

data () {

return {

src: null,

blob: null,

base64: null

}

},

methods: {

inputChange(e) {

const file = e.target.files[0];

this.src = URL.createObjectURL(file);

},

/**

* @param blob BLOB对象

* @param base64 base64字符串

*/

cutChange({ blob, base64 }) {

this.blob = blob;

this.base64 = base64;

}

}

// ...

}

@import "~vue-picture-cut/lib/vue-picture-cut.css";

3、注意

组件在使用时，宽高跟随父级标签，所以需要设置父级标签的宽高。

二、API

暴露的对象

全局引入时

import VuePictureCut from 'vue-picture-cut';

Vue.use(VuePictureCut);

此时会注册：VuePictureCut、VuePictureCutMask、VuePictureCutMenu三个组件。

独立引用

import {

VuePictureCut,

VuePictureCutMask,

VuePictureCutMenu,

Bezier,

createAnimation,

Tool,

createUtils

} from 'vue-picture-cut';

组件：VuePictureCut、VuePictureCutMask、VuePictureCutMenu。 工具类：Bezier、createAnimation、Tool、createUtils。

1、VuePictureCut组件

slot插槽： default、menu

使用：

ref="pictureCut"

:src="src"

:magnification="magnification"

:init-angle="initAngle"

:msk-option="mskOption"

:max-pixel="maxPixel"

:encoder-options="encoderOptions"

:format="format"

:rotate-control="rotateControl"

:menu-position="menuPosition"

:menu-thickness="menuThickness"

:background-color="backgroundColor"

@on-change="onChange"

/>

属性：

src：

类型：string

默认：null

描述：图片链接

magnification：

类型：number

默认：1.5

描述：画布绘制缩放率，取值大于0，值越大绘制的逻辑像素越高

initAngle：

类型：number

必须：非必须

描述：载入图片的初始旋转角度

maxPixel：

类型：number

必须：非必须

描述：导出图片的宽高中较长边的像素，不传时则依据实际图片大小自适应。

encoderOptions：

类型：number

必须：非必须

描述：导出图片的压缩率，不传时按0.8计算，取值范围0~1。

format：

类型：string

默认：false

描述：导出图片的格式，不传时导出格式为“image/jpeg”，其值可以为“image/png”等浏览器支持格式。

mskOption：

类型：object

默认&