vue-cropper 拖动图片和截图框-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue-cropper 拖动图片和截图框。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

开发遇到vue--cropper不能拖动图片和截图框

can-move-box设置为true，表示可以拖动截图框

can-move设置为true，表示可以拖动图片

*注意：

我外层套了一个el-col, el-col的宽高一定要大于截图框的宽高，否则移动不了截图框和图片

vue-cropper 拖动图片和截图框

<el-col :xs="24" :md="12" :style="{height: '720px',width:'1000px',position:'center'}">

<vue-cropper

ref="cropper"

:img="options.imageUrl"

:info="true"

:autoCrop="true"

:autoCropWidth="850px"

:autoCropHeight="680px"

:fixedBox="options.fixedBox"

:can-move-box="true"

:can-move="true"

:fixed-box="true"

@realTime="realTime"

v-if="visible" />

</el-col>

组件源码地址https://github.com/xyxiao001/vue-cropperhttps://github.com/xyxiao001/vue-cropper组件演示地址

vue-cropper

属性文章来源地址https://www.toymoban.com/news/detail-407350.html

名称	功能	默认值	可选值
img	裁剪图片的地址	空	`url 地址`, `base64`, `blob`
outputSize	裁剪生成图片的质量	`1`	0.1 ~ 1
outputType	裁剪生成图片的格式	jpg (jpg 需要传入jpeg)	`jpeg`, `png`, `webp`
info	裁剪框的大小信息	`true`	`true`, `false`
canScale	图片是否允许滚轮缩放	`true`	`true`, `false`
autoCrop	是否默认生成截图框	`false`	`true`, `false`
autoCropWidth	默认生成截图框宽度	容器的 80%	0 ~ max
autoCropHeight	默认生成截图框高度	容器的 80%	0 ~ max
fixed	是否开启截图框宽高固定比例	`false`	`true`, `false`
fixedNumber	截图框的宽高比例	`[1, 1]`	`[ 宽度 , 高度 ]`
full	是否输出原图比例的截图	`false`	`true`, `false`
fixedBox	固定截图框大小	不允许改变	`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	限制图片最大宽度和高度	`2000`	0 ~ max
enlarge	图片根据截图框输出比例倍数	`1`	0 ~ max(建议不要太大不然会卡死的呢)
mode	图片默认渲染方式	`contain`	`contain` , `cover`, `100px`, `100%` auto
limitMinSize	裁剪框限制最小区域	10	Number, Array, String