{"repo":"xyxiao001/vue-cropper","free":true,"listed":false,"github":"https://github.com/xyxiao001/vue-cropper","clone":"git clone https://github.com/xyxiao001/vue-cropper.git","description":"A simple picture clipping plugin for vue","language":"Vue","stars":4558,"topics":["vue","cropper","javascript","vue2","vue3","crop","vue-cropper"],"license":"MIT","category":"ui-components","readme_excerpt":"vue-cropper Vue 3 用户推荐使用新仓库 cropper-next-vue cropper-next-vue 是独立发布的 Vue 3 图片裁剪库，支持旋转后的边界判断、图片限制在裁剪框或容器内、高分屏导出和实时预览。 在线文档和示例访问地址: https://cropper-next-vue.vercel.app/ 一个优雅的图片裁剪插件 [查看演示 Demo ] [README english ] [更新日志 ] 一、安装使用 1. 安装 如果你没有使用 npm 在线例子vue-cropper + vue.2x 在线例子vue-cropper@next + vue.3x 服务器渲染 nuxt 解决方案 设置为 ssr: false 2. 引入 Vue Cropper Vue 3 组件内引入 Vue3 全局引入 Vue3 CDN 方式引入 Vue2 组件内引入 Vue2 全局引入 Vue2 CDN 方式引入 nuxt 引入方式 3. 代码中使用 重要！ 需要关掉本地的 mock 服务， 不然图片转化会报错 重要！ 需要使用外层容器包裹并设置宽高 二、文档 1. props 目前还不知道什么原因项目里面开启 mock 会导致 file 报错，建议使用时关掉 mock 名称 功能 默认值 可选值 --- --- --- --- 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 截图框的宽高比例, 开启 fixed 生效 [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 限制图片最大宽度和高度 2000 0 max enlarge 图片根据截图框输出比例倍数 1 0 max(建议不要太大不然会卡死的呢) mode 图片默认渲染方式 contain contain , cover , 100px , 100% auto limitMinSize 裁剪框限制最小区域 10 Number, Array, St","default_branch":null,"files":null,"tree":[],"storefront":"/r/xyxiao001","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/xyxiao001/vue-cropper/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}