[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-8678":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":16,"stars30d":17,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":18,"rankGlobal":10,"rankLanguage":10,"license":19,"archived":20,"fork":20,"defaultBranch":21,"hasWiki":22,"hasPages":22,"topics":23,"createdAt":10,"pushedAt":10,"updatedAt":30,"readmeContent":31,"aiSummary":32,"trendingCount":16,"starSnapshotCount":16,"syncStatus":33,"lastSyncTime":34,"discoverSource":35},8678,"vue-cropper","xyxiao001\u002Fvue-cropper","xyxiao001","A simple  picture clipping plugin for vue","https:\u002F\u002Fgithub.xyxiao.cn\u002Fvue-cropper\u002Fdocs\u002Fvue3.html",null,"Vue",4567,710,36,183,0,1,30.56,"MIT License",false,"main",true,[24,25,26,27,5,28,29],"crop","cropper","javascript","vue","vue2","vue3","2026-06-12 02:01:56","# vue-cropper\n\n> `Vue 3` 用户推荐使用新仓库 [cropper-next-vue](https:\u002F\u002Fgithub.com\u002Fxyxiao001\u002Fcropper-next-vue)\n>\n> `cropper-next-vue` 是独立发布的 `Vue 3` 图片裁剪库，支持旋转后的边界判断、图片限制在裁剪框或容器内、高分屏导出和实时预览。\n>\n> 在线文档和示例访问地址: [https:\u002F\u002Fcropper-next-vue.vercel.app\u002F](https:\u002F\u002Fcropper-next-vue.vercel.app\u002F)\n\n一个优雅的图片裁剪插件\n\n[ [查看演示 Demo](https:\u002F\u002Fgithub.xyxiao.cn\u002Fvue-cropper\u002Fdocs\u002Fvue2.html) ]  \n[ [README_english](.\u002Fenglish.md) ]  \n[ [更新日志](.\u002FCHANGELOG.md) ]\n\n\n\n## 一、安装使用\n\n\n### 1. 安装\n\n```bash\n# npm 安装\nnpm install vue-cropper\n```\n```bash\n# yarn 安装\nyarn add vue-cropper\n```\n\n\n如果你没有使用 `npm`\n\n[在线例子vue-cropper + vue.2x](https:\u002F\u002Fcodepen.io\u002Fxyxiao001\u002Fpen\u002FwxwKGz)\n\n[在线例子vue-cropper@next + vue.3x](https:\u002F\u002Fcodepen.io\u002Fxyxiao001\u002Fpen\u002FyLooYKg)\n\n服务器渲染 `nuxt` 解决方案 设置为 `ssr: false`\n```js\nmodule.exports = {\n  ...\n  build: {\n    vendor: [\n      'vue-cropper\n    ...\n    plugins: [\n      { src: '~\u002Fplugins\u002Fvue-cropper', ssr: false }\n    ]\n  }\n}\n```\n\n\n### 2. 引入 Vue Cropper \n`Vue 3` 组件内引入\n```bash\nnpm install vue-cropper@next\nimport 'vue-cropper\u002Fdist\u002Findex.css'\nimport { VueCropper }  from \"vue-cropper\";\n```\n\n`Vue3` 全局引入\n```js\nimport VueCropper from 'vue-cropper'; \nimport 'vue-cropper\u002Fdist\u002Findex.css'\n\nconst app = createApp(App)\napp.use(VueCropper)\napp.mount('#app')\n```\n\n`Vue3 CDN` 方式引入\n```html\n\u003Cstyle type=\"text\u002Fcss\" src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fvue-cropper@1.0.2\u002Fdist\u002Findex.css\">\u003C\u002Fstyle> \n```\n\n```js\n\u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fvue@3.2.1\u002Fdist\u002Fvue.global.js\">\u003C\u002Fscript>\n\u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fvue-cropper@1.0.2\u002Fdist\u002Fvue-cropper.umd.js\">\u003C\u002Fscript>\nconst app = Vue.createApp({...});\napp.component('vue-cropper', window['vue-cropper'].VueCropper);\n```\n\n\n`Vue2` 组件内引入\n```js\nimport { VueCropper }  from 'vue-cropper' \ncomponents: {\n  VueCropper\n}\n```\n\n`Vue2` 全局引入\n```js\nimport VueCropper from 'vue-cropper'\nVue.use(VueCropper)\n```\n\n\n`Vue2 CDN` 方式引入\n```html\n\u003Cscript src=\"\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fvue-cropper@0.4.9\u002Fdist\u002Findex.js\">\u003C\u002Fscript>\n```\n```js\nVue.use(window['vue-cropper'].default)\n```\n\n\n`nuxt` 引入方式\n```js\nif(process.browser) {\n  vueCropper = require('vue-cropper')\n  Vue.use(vueCropper.default)\n}\n```\n\n### 3. 代码中使用\n\n> **重要！** 需要关掉本地的 mock 服务， 不然图片转化会报错\n> **重要！** 需要使用外层容器包裹并设置宽高\n\n```html\n\u003CvueCropper\n  ref=\"cropper\"\n  :img=\"option.img\"\n  :outputSize=\"option.size\"\n  :outputType=\"option.outputType\"\n>\u003C\u002FvueCropper>\n```\n\n\n## 二、文档\n\n### 1. props\n\n> 目前还不知道什么原因项目里面开启 `mock` 会导致 file 报错，建议使用时关掉 `mock`\n\n\n名称 | 功能 | 默认值 | 可选值\n--- | --- | --- | ---\nimg | 裁剪图片的地址 | 空 | `url 地址`, `base64`, `blob`\noutputSize | 裁剪生成图片的质量 | `1` | 0.1 ~ 1\noutputType | 裁剪生成图片的格式 | jpg (jpg 需要传入jpeg) | `jpeg`, `png`, `webp`\ninfo | 裁剪框的大小信息 | `true` | `true`, `false`\ncanScale | 图片是否允许滚轮缩放 | `true` | `true`, `false`\nautoCrop | 是否默认生成截图框 | `false` | `true`, `false`\nautoCropWidth | 默认生成截图框宽度 | 容器的 80% | 0 ~ max\nautoCropHeight | 默认生成截图框高度 | 容器的 80% | 0 ~ max\nfixed | 是否开启截图框宽高固定比例 | `false` | `true`, `false`\nfixedNumber | 截图框的宽高比例, 开启`fixed`生效 | `[1, 1]` | `[ 宽度 ,  高度 ]`\nfull | 是否输出原图比例的截图 | `false` | `true`, `false`\nfixedBox | 固定截图框大小 | 不允许改变 | `false` | `true`, `false`\ncanMove | 上传图片是否可以移动 | `true` | `true`, `false`\ncanMoveBox | 截图框能否拖动 | `true` | `true`, `false`\noriginal | 上传图片按照原始比例渲染 | `false` | `true`, `false`\ncenterBox | 截图框是否被限制在图片里面 | `false` | `true`, `false`\nhigh | 是否按照设备的dpr 输出等比例图片 | `true` | `true`, `false`\ninfoTrue | true 为展示真实输出图片宽高 `false` 展示看到的截图框宽高 | false | `true`, `false`\nmaxImgSize | 限制图片最大宽度和高度 | `2000` | 0 ~ max\nenlarge | 图片根据截图框输出比例倍数 | `1` | 0 ~ max(建议不要太大不然会卡死的呢)\nmode | 图片默认渲染方式 | `contain` | `contain` , `cover`, `100px`, `100%` auto\nlimitMinSize | 裁剪框限制最小区域 | 10 | Number, Array, String\nfillColor | 导出时背景颜色填充 | 空 | `#ffffff`, `white`\n\n### 2. 可用回调方法\n\n- `@realTime` 实时预览事件\n- `@imgMoving`  图片移动回调函数\n- `@cropMoving` 截图框移动回调函数\n- `@imgLoad`  图片加载的回调, 返回结果 `success`,  `error`\n\n#### @realTime 实时预览事件\n```js\nrealTime(data) {\n  var previews = data\n  var h = 0.5\n  var w = 0.2\n\n  this.previewStyle1 = {\n    width: previews.w + \"px\",\n    height: previews.h + \"px\",\n    overflow: \"hidden\",\n    margin: \"0\",\n    zoom: h\n  }\n\n  this.previewStyle2 = {\n    width: previews.w + \"px\",\n    height: previews.h + \"px\",\n    overflow: \"hidden\",\n    margin: \"0\",\n    zoom: w\n  }\n\n  \u002F\u002F 固定为 100 宽度\n  this.previewStyle3 = {\n    width: previews.w + \"px\",\n    height: previews.h + \"px\",\n    overflow: \"hidden\",\n    margin: \"0\",\n    zoom: 100 \u002F preview.w\n  }\n\n  \u002F\u002F 固定为 100 高度\n  this.previewStyle4 = {\n    width: previews.w + \"px\",\n    height: previews.h + \"px\",\n    overflow: \"hidden\",\n    margin: \"0\",\n    zoom: 100 \u002F preview.h\n  }\n  this.previews = data\n}\n```\n\n```html\n\u003Cdiv class=\"show-preview\" :style=\"{'width': previews.w + 'px', 'height': previews.h + 'px',  'overflow': 'hidden',\n    'margin': '5px'}\">\n  \u003Cdiv :style=\"previews.div\">\n    \u003Cimg :src=\"option.img\" :style=\"previews.img\">\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>中等大小\u003C\u002Fp>\n\u003Cdiv :style=\"previewStyle1\"> \n  \u003Cdiv :style=\"previews.div\">\n    \u003Cimg :src=\"previews.url\" :style=\"previews.img\">\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\n\u003Cp>迷你大小\u003C\u002Fp>\n\u003Cdiv :style=\"previewStyle2\"> \n  \u003Cdiv :style=\"previews.div\">\n    \u003Cimg :src=\"previews.url\" :style=\"previews.img\">\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n```\n\n\n#### @imgMoving 图片移动回调函数\n\n返回的参数内容\n```js\n{\n   moving: true, \u002F\u002F moving 是否在移动\n   axis: {\n     x1: 1, \u002F\u002F 左上角\n     x2: 1，\u002F\u002F 右上角\n     y1: 1，\u002F\u002F 左下角\n     y2: 1 \u002F\u002F 右下角\n   }\n }\n```\n\n#### @cropMoving 截图框移动回调函数\n返回的参数内容\n```js\n{\n   moving: true, \u002F\u002F moving 是否在移动\n   axis: {\n     x1: 1, \u002F\u002F 左上角\n     x2: 1，\u002F\u002F 右上角\n     y1: 1，\u002F\u002F 左下角\n     y2: 1 \u002F\u002F 右下角\n   }\n }\n```\n\n\n### 2. 内置方法 和 属性\n通过 `this.$refs.cropper` 调用\n\n**属性**\n\n属性 | 说明\n--- | ---\nthis.$refs.cropper.cropW |  截图框宽度\nthis.$refs.cropper.cropH | 截图框高度\n\n\n**方法**\n\n方法 | 说明\n--- | ---\nthis.$refs.cropper.startCrop() | 开始截图\nthis.$refs.cropper.stopCrop() | 停止截图\nthis.$refs.cropper.clearCrop() | 清除截图\nthis.$refs.cropper.changeScale() | 修改图片大小 正数为变大 负数变小\nthis.$refs.cropper.getImgAxis() | 获取图片基于容器的坐标点\nthis.$refs.cropper.getCropAxis() | 获取截图框基于容器的坐标点\nthis.$refs.cropper.goAutoCrop | 自动生成截图框函数\nthis.$refs.cropper.rotateRight() | 向右边旋转90度\nthis.$refs.cropper.rotateLeft() | 向左边旋转90度\n\n**获取截图内容**\n\n获取截图的 base64 数据\n\n```js\nthis.$refs.cropper.getCropData(data => {\n  \u002F\u002F do something\n  console.log(data)  \n})\n```\n\n获取截图的 blob 数据\n```js\nthis.$refs.cropper.getCropBlob(data => {\n  \u002F\u002F do something\n  console.log(data)  \n})\n```\n\n\n\n\n\n## 三、相关文章参考\n- [shn_ui - vue-cropper ](https:\u002F\u002Fshnhz.github.io\u002Fshn-ui\u002F#\u002Fcomponent\u002Fvue-cropper) - 野宁新之助\n- [vue全家桶开发管理后台—裁切图片](https:\u002F\u002Fblog.csdn.net\u002Fqq_30632003\u002Farticle\u002Fdetails\u002F79639346)  - 麻球科技-菅双鹏\n- [Vue-cropper 图片裁剪的基本原理](https:\u002F\u002Fwww.cnblogs.com\u002Ftugenhua0707\u002Fp\u002F8859291.html) - 龙恩0707\n- [关于昵称和头像的总结（模仿微信）](https:\u002F\u002Fzhuanlan.zhihu.com\u002Fp\u002F45746753)  - 秋晨光\n- [vue-cropper-h5](https:\u002F\u002Fgithub.com\u002F2277419213\u002Fvue-cropper-h5)  - 居里栈栈\n\n## 四、交流\n有什么意见，或者 bug，或者想一起开发 `vue-cropper`， 或者想一起开发其他插件\n![image](https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F740d67f7-d924-458e-bc88-b76b8a395feb)\n\n\n\n\n","vue-cropper 是一个适用于 Vue 框架的简洁图片裁剪插件。它支持多种图片格式（如 URL、Base64 和 Blob）作为输入源，并允许用户自定义裁剪框大小、输出图片质量和格式等参数，还提供了旋转后的边界判断、图片限制在裁剪框或容器内等功能。该插件既可以通过 npm\u002Fyarn 方式安装使用，也支持 CDN 引入，方便快捷地集成到基于 Vue 2 或 Vue 3 的项目中。特别适合需要在线图片编辑功能的应用场景，比如社交媒体平台上的头像上传处理、电子商务网站的商品图片展示前的预处理等。",2,"2026-06-11 03:19:16","top_language"]