vue-cutter

简介

- 基于vue和javascript开发的一款图片剪裁处理工具
- 优点：原生、轻量、使用简单、功能全面、扩展性强
- 目前功能：支持旋转、缩放、平移，固定比例，固定尺寸
- 支持 PC端 和 移动端
- 关于缩放：鼠标（鼠标滚轮缩放）, 移动端双指缩放

在线预览

> demo : https://lyuanshen.github.io/vue-cutter/

使用方法

$3

``
// npm 安装
npm install vue-cutter --save
`

`
// yarn 安装
yarn add vue-cutter --save
`




$3

`js
// main.js里面使用
import VueCutter from 'vue-cutter'
Vue.use(VueCutter)

// 组件内使用
import { VueCutter } from 'vue-cutter'
components: { VueCutter }
`

`vue



`

$3

参数	说明	类型	可选值	默认值
containerBounding	插件容器的宽高（必填）	String	'450px 300px' | '45% 30%' | '450px' | '45%' | '450'	空 || 字符串可以有两个或一个参数，两个参数时分别为容器的宽高，一个参数时容器的宽高同为参数
src	裁剪图片的地址	String	url 地址 | base64 | blob	空
mode	图片默认渲染方式	String	contain | cover | 100px, 100% auto | original	contain
outputType	裁剪生成图片的格式	String	jpeg | png | webp | jgif	jpeg
highQuality	输出高清的图片	Boolean	true | false	false
canImgMoved	是否能移动图片	Boolean	true | false	true
canImgScale	图片是否允许缩放	Boolean	true | false	true
cropBoxBounding	裁剪框宽高	String	auto || 200 || 200px || 200px 200px || 50% 等	auto (图片宽高的80%)
canCropMove	是否能移动裁剪框	Boolean	true | false	true
canCropOverImg	裁剪框是否被限制在图片里面	Boolean	true | false	true
fixed	裁剪款的宽高比	[Array, String]	auto | [4, 3] 等	默认为空，不开启宽高比；值 auto 时 为源图片的宽高比，数组时为两数比
canCropResized	裁剪框是否允许缩放	Boolean	true | false	true
cropDividingLine	裁剪框内的分割线	Boolean	true | false	false
cropInfo	是否开启显示裁剪宽的宽高比	Boolean	true | false	false

$3

##### 通过 ref 和 $refs 调用

`vue
// 在标签上添加 ref= "cutter"
ref="cutter"
>

`












































方法	说明
this.$refs.cutter.addLocalImage()	添加本地要裁剪的图片
this.$refs.cutter.relativeZoom(param)	对图片进行缩放，正数为放大，负数为缩小
this.$refs.cutter.rotateLeft()	图片逆时针旋转 90 度
this.$refs.cutter.rotateRight()	图片顺时针旋转 90 度
this.$refs.cutter.rotateClear()	清除旋转
this.$refs.cutter.getImgAxis()	获取图像的轴
this.$refs.cutter.getCropAxis()	获取裁剪框的轴
this.$refs.cutter.getBase64Data(funtion)	获取 base64 格式的图片
this.$refs.cutter.getBlobData(funtion)	获取 blob 格式的图片

`javascript

//获取 base64 格式的图片
this.$refs.cutter.getBase64Data(data => {
console.log(data)
})

//获取 blob 格式的图片
this.$refs.cutter.getBlobData(data => {
console.log(data)
})
`

$3

##### 图片实时预览函数 @preview

`vue
@preview="preview"
>

`

`vue
// data
data(){
return{
html: ''
}
}

// method
preview(data) {
const { html } = data;
this.html = html;
}

// html



``

$3

###### Released under the MIT License.