autoCropWidth: 256, // 默认生成截图框宽度 autoCropHeight: 144, // 默认生成截图框高度 fixedBox: false, // 固定截图框大小 不允许改变 fixed: true, // 是否开启截图框宽高固定比例 fixedNumber: [16, 9], // 截图框的宽高比例 [ 宽度 , 高度 ] canMove: true, // 上传图片是否可以移动 canM...
autoCropWidth: number; // 生成截图框的宽度 autoCropHeight: number; // 生成截图框的高度 canMoveBox: boolean; // 截图框是否可以拖动 enlarge: number; fixedBox: boolean; // 固定截图框的大小 fixed: boolean; // 是否开启截图框宽高固定比例 fixedNumber: number[]; // 截图框的宽高比例 默认2.35...
autoCropWidth:'100',//默认生成截图框宽度 autoCropHeight:'100',//默认生成截图框高度 centerBox:true,//截图框是否被限制在图片里面 high:true,//是否按照设备的dpr 输出等比例图片 infoTrue:false,//true 为展示真实输出图片宽高 false 展示看到的截图框宽高 enlarge:1,//图片根据截图框输出比例倍数 maxIm...
this.option.autoCropWidth = "" // 默认生成截图框宽度 this.option.autoCropHeight = "" // 默认生成截图框高度 this.option.fixed = false // 是否开启截图框宽高固定比例
// cropper配置 更多配置可参考 https://www.npmjs.com/package/vue-cropper const options = reactive({ img: null, // 裁剪图片的地址 autoCropWidth: 200, // 默认生成截图框宽度 默认容器的 80% autoCropHeight: 200, // 默认生成截图框高度 默认容器的 80% ...
autoCropWidth: 300, // 默认生成截图框宽度 autoCropHeight: 210, // 默认生成截图框高度 fixedBox: true, // 固定截图框大小 不允许改变 fixed: true, // 是否开启截图框宽高固定比例 fixedNumber: [3, 1], // 截图框的宽高比例 full: true, // 是否输出原图比例的截图 ...
autoCrop:是否默认生成裁剪框 autoCropWidth和autoCropHeight:截图大小,这里固定为144px*144px fixedBox:固定截图框大小 不允许改变 裁剪组件: <vueCropper class="content" ref="cropper" :img="option.img" :outputSize="option.outputSize" :outputType=...
centerBox: 限制截图框仅在图片内部移动，确保可操作区域仅为图片本身，避免超出范围。autoCropWidth/autoCropHeight: 默认值为容器大小的 80%，根据项目需求调整以优化截图效果。例如，设定为 600x600，满足特定宽度与高度需求。基本截图功能至此实现，如需进一步定制截取图片效果，可深入 VueCropper 文档，...
vue-cropper官网 链接:https://github.com/xyxiao001/vue-cropper 安装:npm install vue-cropper 或者 yarn add vue-cropper 组件封装CropperImage.vue <template> <vue-cropper ref="cropper" :img="option.img" :output...
autoCrop: true, // 是否默认生成截图框 autoCropWidth: 195, // 默认生成截图框宽度 autoCropHeight: 10, // 默认生成截图框高度 fixed: false, //是否开启截图框宽高固定比例 fixedNumber: [1, 1] //截图框的宽高比例 }, isShowCropper: false //是否显示截图框 ...