rotate属性
vue-cropper的使⽤的属性
1． ⾸先安装vue-cropper
npm install vue-cropper
yarn add vue-cropper
2． vue-cropper的属性
名称功能默认值可选值img裁剪图⽚的地址空url 地址 / base64 / blob outputSize裁剪⽣成图⽚的质量10.1 - 1 outputType裁剪⽣成图⽚的格式true true /false info裁剪框的⼤⼩信息true true / false canScale图⽚是否允许滚轮缩放false true /false autoCrop是否默认⽣成截图框false true /false
autoCropWidt h 默认⽣成截图框宽度
容器的
80%
0~max
autoCropHeig ht 默认⽣成截图框⾼度
容器的
80%
0~max
fixed是否开启截图框宽⾼固定⽐例true true /false fixedNumber截图框的宽⾼⽐例[1, 1][宽度, ⾼度] full是否输出原图⽐例的截图false true /false fixedBox固定截图框⼤⼩ 不允许改变false true /false canMove上传图⽚是否可以移动true true /false canMoveBox截图框能否拖动true true /false original上传图⽚按照原始⽐例渲染false true /false centerBox截图框是否被限制在图⽚⾥⾯false true /false high是否按照设备的dpr 输出等⽐例图⽚true true /false
infoTrue true 为展⽰真实输出图⽚宽⾼ false 展⽰看到的截图
框宽⾼
false true/false
maxImgSize限制图⽚最⼤宽度和⾼度20000-max enlarge图⽚根据截图框输出⽐例倍数10-max(建议不要太⼤不然卡死)
mode图⽚默认渲染⽅式contain contain , cover, 100px, 100%
auto
3． ⽅法：
内置⽅法 通过this.$pper 调⽤this.$pper.startCrop() 开始截图this.$pper.stopCrop() 停⽌截图
this.$pper.clearCrop() 清除截图
this.$pper.changeScale() 修改图⽚⼤⼩ 正数为变⼤ 负数变⼩this.$ImgAxis() 获取图⽚基于容器的坐标点
this.$CropAxis() 获取截图框基于容器的坐标点this.$AutoCrop ⾃动⽣成截图框函数
this.$ateRight() 向右边旋转90度
this.$ateLeft() 向左边旋转90度
图⽚加载的回调 imgLoad 返回结果success, error
获取截图信息
this.$pW 截图框宽度
this.$pH 截图框⾼度

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。