vue实现图片裁剪vue-cropper的使用方法

vue-cropper的安装

npm install vue-cropper
或
yarn add vue-cropper

只需要一个图片地址和一个导出截取后图片的方法，vue-cropper在截取图片后会返回一个图片的base64数据。

预览效果图：

常用api属性描述：

    img: '', //裁剪图片的地址
    outputSize: 1, //裁剪生成图片的质量(可选0.1 - 1)
    outputType: 'jpeg', //裁剪生成图片的格式（jpeg || png || webp）
    info: true, //图片大小信息
    canScale: true, //图片是否允许滚轮缩放
    autoCrop: true, //是否默认生成截图框
    autoCropWidth: 230, //默认生成截图框宽度
    autoCropHeight: 150, //默认生成截图框高度
    fixed: true, //是否开启截图框宽高固定比例
    fixedNumber: [1.53, 1], //截图框的宽高比例
    full: false, //false按原比例裁切图片，不失真
    fixedBox: true, //固定截图框大小，不允许改变
    canMove: false, //上传图片是否可以移动
    canMoveBox: true, //截图框能否拖动
    original: false, //上传图片按照原始比例渲染
    centerBox: false, //截图框是否被限制在图片里面
    height: true, //是否按照设备的dpr 输出等比例图片
    infoTrue: false, //true为展示真实输出图片宽高，false展示看到的截图框宽高
    maxImgSize: 3000, //限制图片最大宽度和高度
    enlarge: 1, //图片根据截图框输出比例倍数
    mode: '230px 150px' //图片默认渲染方式