//vue-cropper中对裁切尺寸的控制有:

autoCropWidth: "max", // 默认生成截图框宽度

autoCropHeight: "max", // 默认生成截图框高度

fixed: true, // 是否开启截图框宽高固定比例

fixedNumber: [1, 1], // 截图框的宽高比例

enlarge: 1, // 图片根据截图框输出比例倍数

1、默认生成裁切框宽度、高度,应该不用说了吧,就是裁切框的宽高,如果设置了宽高,这时候裁切比例fixedNumber是不起作用的

2、输出图片宽高 = enlarge * autoCropWidth,enlarge * autoCropHeight

例:enlarge = 2,autoCropWidth = 200,autoCropHeight = 300,则裁切出的图片实际宽高就是400 * 600

3、拓展

如果fixedBox(固定截图框大小不允许改变)为false时,就是允许裁切框大小改变,这时候这个插件是没有最小裁切尺寸这个变量的,所以,我对源码进行了修改;

下载地址:https://gitee.com/xiao_qian_zhou/vue-cropper-extend

就作为一个插件引入

//在main.js中
import VueCropper from './assets/VueCropper/index.js'
Vue.use(VueCropper)

然后使用方法,请参考上一篇基于vue的图片裁剪vue-cropper

Logo

前往低代码交流专区

更多推荐