{"id":13535848,"url":"https://github.com/xyxiao001/vue-cropper","last_synced_at":"2025-05-13T18:09:40.442Z","repository":{"id":37663392,"uuid":"92027632","full_name":"xyxiao001/vue-cropper","owner":"xyxiao001","description":"A simple  picture clipping plugin for vue","archived":false,"fork":false,"pushed_at":"2024-07-23T03:16:22.000Z","size":1717,"stargazers_count":4466,"open_issues_count":173,"forks_count":712,"subscribers_count":35,"default_branch":"main","last_synced_at":"2025-05-06T12:13:03.982Z","etag":null,"topics":["crop","cropper","javascript","vue","vue-cropper","vue2","vue3"],"latest_commit_sha":null,"homepage":"https://github.xyxiao.cn/vue-cropper/docs/vue3.html","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/xyxiao001.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-05-22T08:02:58.000Z","updated_at":"2025-05-06T06:45:21.000Z","dependencies_parsed_at":"2022-07-13T13:50:35.546Z","dependency_job_id":"639ac72f-4c0a-4051-a128-98afaea14aa8","html_url":"https://github.com/xyxiao001/vue-cropper","commit_stats":{"total_commits":273,"total_committers":29,"mean_commits":9.413793103448276,"dds":0.2344322344322345,"last_synced_commit":"483af064ca0ba15ca8a13b3bf8988f4691fdd54c"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xyxiao001%2Fvue-cropper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xyxiao001%2Fvue-cropper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xyxiao001%2Fvue-cropper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xyxiao001%2Fvue-cropper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xyxiao001","download_url":"https://codeload.github.com/xyxiao001/vue-cropper/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254000851,"owners_count":21997441,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["crop","cropper","javascript","vue","vue-cropper","vue2","vue3"],"created_at":"2024-08-01T09:00:30.067Z","updated_at":"2025-05-13T18:09:40.408Z","avatar_url":"https://github.com/xyxiao001.png","language":"Vue","funding_links":[],"categories":["UI Components [🔝](#readme)","UI组件","Vue","Components \u0026 Libraries","UI Components","插件","Web 应用"],"sub_categories":["形成","UI Components","Form","PC端"],"readme":"# vue-cropper\n一个优雅的图片裁剪插件\n\n[ [查看演示 Demo](https://github.xyxiao.cn/vue-cropper/docs/vue2.html) ]  \n[ [README_english](./english.md) ]  \n[ [更新日志](./CHANGELOG.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://codepen.io/xyxiao001/pen/wxwKGz)\n\n[在线例子vue-cropper@next + vue.3x](https://codepen.io/xyxiao001/pen/yLooYKg)\n\n服务器渲染 `nuxt` 解决方案 设置为 `ssr: false`\n```js\nmodule.exports = {\n  ...\n  build: {\n    vendor: [\n      'vue-cropper\n    ...\n    plugins: [\n      { src: '~/plugins/vue-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/dist/index.css'\nimport { VueCropper }  from \"vue-cropper\";\n```\n\n`Vue3` 全局引入\n```js\nimport VueCropper from 'vue-cropper'; \nimport 'vue-cropper/dist/index.css'\n\nconst app = createApp(App)\napp.use(VueCropper)\napp.mount('#app')\n```\n\n`Vue3 CDN` 方式引入\n```html\n\u003cstyle type=\"text/css\" src=\"https://cdn.jsdelivr.net/npm/vue-cropper@1.0.2/dist/index.css\"\u003e\u003c/style\u003e \n```\n\n```js\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/vue@3.2.1/dist/vue.global.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/vue-cropper@1.0.2/dist/vue-cropper.umd.js\"\u003e\u003c/script\u003e\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=\"//cdn.jsdelivr.net/npm/vue-cropper@0.4.9/dist/index.js\"\u003e\u003c/script\u003e\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\u003e **重要！** 需要关掉本地的 mock 服务， 不然图片转化会报错\n\u003e **重要！** 需要使用外层容器包裹并设置宽高\n\n```html\n\u003cvueCropper\n  ref=\"cropper\"\n  :img=\"option.img\"\n  :outputSize=\"option.size\"\n  :outputType=\"option.outputType\"\n\u003e\u003c/vueCropper\u003e\n```\n\n\n## 二、文档\n\n### 1. props\n\n\u003e 目前还不知道什么原因项目里面开启 `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  // 固定为 100 宽度\n  this.previewStyle3 = {\n    width: previews.w + \"px\",\n    height: previews.h + \"px\",\n    overflow: \"hidden\",\n    margin: \"0\",\n    zoom: 100 / preview.w\n  }\n\n  // 固定为 100 高度\n  this.previewStyle4 = {\n    width: previews.w + \"px\",\n    height: previews.h + \"px\",\n    overflow: \"hidden\",\n    margin: \"0\",\n    zoom: 100 / 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'}\"\u003e\n  \u003cdiv :style=\"previews.div\"\u003e\n    \u003cimg :src=\"option.img\" :style=\"previews.img\"\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\u003cp\u003e中等大小\u003c/p\u003e\n\u003cdiv :style=\"previewStyle1\"\u003e \n  \u003cdiv :style=\"previews.div\"\u003e\n    \u003cimg :src=\"previews.url\" :style=\"previews.img\"\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\n\u003cp\u003e迷你大小\u003c/p\u003e\n\u003cdiv :style=\"previewStyle2\"\u003e \n  \u003cdiv :style=\"previews.div\"\u003e\n    \u003cimg :src=\"previews.url\" :style=\"previews.img\"\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n\n#### @imgMoving 图片移动回调函数\n\n返回的参数内容\n```js\n{\n   moving: true, // moving 是否在移动\n   axis: {\n     x1: 1, // 左上角\n     x2: 1，// 右上角\n     y1: 1，// 左下角\n     y2: 1 // 右下角\n   }\n }\n```\n\n#### @cropMoving 截图框移动回调函数\n返回的参数内容\n```js\n{\n   moving: true, // moving 是否在移动\n   axis: {\n     x1: 1, // 左上角\n     x2: 1，// 右上角\n     y1: 1，// 左下角\n     y2: 1 // 右下角\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 =\u003e {\n  // do something\n  console.log(data)  \n})\n```\n\n获取截图的 blob 数据\n```js\nthis.$refs.cropper.getCropBlob(data =\u003e {\n  // do something\n  console.log(data)  \n})\n```\n\n\n\n\n\n## 三、相关文章参考\n- [shn_ui - vue-cropper ](https://shnhz.github.io/shn-ui/#/component/vue-cropper) - 野宁新之助\n- [vue全家桶开发管理后台—裁切图片](https://blog.csdn.net/qq_30632003/article/details/79639346)  - 麻球科技-菅双鹏\n- [Vue-cropper 图片裁剪的基本原理](https://www.cnblogs.com/tugenhua0707/p/8859291.html) - 龙恩0707\n- [关于昵称和头像的总结（模仿微信）](https://zhuanlan.zhihu.com/p/45746753)  - 秋晨光\n- [vue-cropper-h5](https://github.com/2277419213/vue-cropper-h5)  - 居里栈栈\n\n## 四、交流\n有什么意见，或者 bug，或者想一起开发 `vue-cropper`， 或者想一起开发其他插件\n![image](https://github.com/user-attachments/assets/740d67f7-d924-458e-bc88-b76b8a395feb)\n\n\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxyxiao001%2Fvue-cropper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxyxiao001%2Fvue-cropper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxyxiao001%2Fvue-cropper/lists"}