点我扫二维码，查看demo
# ImageResizer 裁剪图片
# 介绍
对本地图片进行裁剪
# 引入
import Vue from 'Vue'
import { mxImageResizer } from 'mui-event'
import 'mui-event/lib/index/index.css'
Vue.use(mxImageResizer)
1
2
3
4
2
3
4
# 代码演示
# 基础用法
绑定 callback 事件，并在下面预览裁剪后的图片。
<div>
<mx-image-resizer @callback="getOneImg">
<div class="common-class">
<span>点我选择图片</span>
</div>
</mx-image-resizer>
</div>
<div class="preview" v-if="oneImg">
<img :src="oneImg" alt="" class="preview-img" />
</div>
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
export default {
data() {
return {
oneImg: '',
}
}
methods: {
getOneImg(val) {
this.oneImg = val
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# 自定义裁剪框宽高比例
安卓系统可以通过 androidDownload 属性控制下载方式。
<div>
<mx-image-resizer :widthRate="1" :heightRate="3" @callback="getTwoImg">
<div class="common-class">
<span>点我选择图片</span>
</div>
</mx-image-resizer>
</div>
<div class="preview" v-if="twoImg">
<img :src="twoImg" alt="" class="preview-img2" />
</div>
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
export default {
data() {
return {
twoImg: '',
}
}
methods: {
getTwoImg(val) {
this.twoImg = val
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# API
# Props
| 参数 | 说明 | 类型 | 默认值 | 必填 |
|---|---|---|---|---|
| widthRate | 自定义宽高比中的宽 | Number | 1 | 否 |
| heightRate | 自定义宽高比中的高 | Number | 1 | 否 |
# Eventss
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| callback | 裁剪后，返回 base64 格式的图片地址 | 返回String 数据 |