ImageResizer 裁剪图片

ImageResizer 裁剪图片

#介绍

对本地图片进行裁剪

#引入

import Vue from 'Vue'
import { mxImageResizer } from 'mui-event'
import 'mui-event/lib/index/index.css'
Vue.use(mxImageResizer)

#代码演示

#基础用法

绑定 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>

export default {
    data() {
        return {
            oneImg: '',
        }
    }
    methods: {
        getOneImg(val) {
            this.oneImg = val
        }
    }
}

#自定义裁剪框宽高比例

安卓系统可以通过 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>

export default {
    data() {
        return {
            twoImg: '',
        }
    }
    methods: {
        getTwoImg(val) {
            this.twoImg = val
        }
    }
}

#API

#Props

参数	说明	类型	默认值	必填
widthRate	自定义宽高比中的宽	Number	1	否
heightRate	自定义宽高比中的高	Number	1	否

#Eventss

事件名	说明	回调参数
callback	裁剪后，返回 base64 格式的图片地址	返回String 数据