A simple picture clipping plugin for Vue.js
npm install vue-cutter

- 基于vue和javascript开发的一款图片剪裁处理工具
- 优点:原生、轻量、使用简单、功能全面、扩展性强
- 目前功能:支持旋转、缩放、平移,固定比例,固定尺寸
- 支持 PC端 和 移动端
- 关于缩放:鼠标(鼠标滚轮缩放), 移动端双指缩放
> demo : https://lyuanshen.github.io/vue-cutter/
```
// npm 安装
npm install vue-cutter --save
``
// yarn 安装
yarn add vue-cutter --save
`js
// main.js里面使用
import VueCutter from 'vue-cutter'
Vue.use(VueCutter)
// 组件内使用
import { VueCutter } from 'vue-cutter'
components: { VueCutter }
`
`vue
:src="options.src"
:output-type="options.outputType"
>
`
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| 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 |
和 $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
``