[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-8988":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":17,"stars30d":18,"stars90d":16,"forks30d":16,"starsTrendScore":19,"compositeScore":20,"rankGlobal":10,"rankLanguage":10,"license":21,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":24,"hasPages":24,"topics":25,"createdAt":10,"pushedAt":10,"updatedAt":32,"readmeContent":33,"aiSummary":34,"trendingCount":16,"starSnapshotCount":16,"syncStatus":19,"lastSyncTime":35,"discoverSource":36},8988,"vue-advanced-cropper","advanced-cropper\u002Fvue-advanced-cropper","advanced-cropper","The advanced vue cropper library that gives you opportunity to create your own croppers suited for any website design","https:\u002F\u002Fadvanced-cropper.github.io\u002Fvue-advanced-cropper\u002F",null,"Vue",1178,162,9,35,0,3,11,2,57.24,"Other",false,"master",true,[26,27,28,29,30,31],"advanced","cropper","flexible","library","vue","vue-cropper","2026-06-12 04:00:42","\u003Cp align=\"center\">\u003Ca href=\"https:\u002F\u002Fadvanced-cropper.github.io\u002Fvue-advanced-cropper\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cimg width=\"133\" src=\"https:\u002F\u002Fgithub.com\u002Fadvanced-cropper\u002Fvue-advanced-cropper\u002Fblob\u002Fmaster\u002Fexample\u002Freadme\u002Flogo.svg?raw=true&timestamp=1608385818575\" alt=\"Vue Advanced Cropper logo\">\u003C\u002Fa>\u003C\u002Fp>\n\u003Cbr\u002F>\n\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fnpmcharts.com\u002Fcompare\u002Fvue-advanced-cropper?minimal=true\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdm\u002Fvue-advanced-cropper.svg?sanitize=true\" alt=\"Downloads\">\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fvue-advanced-cropper\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Fvue-advanced-cropper\u002Fvue-3.svg?sanitize=true\" alt=\"Version\">\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fvue-advanced-cropper\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Fvue-advanced-cropper\u002Fvue-2.svg?sanitize=true\" alt=\"Version\">\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fvue-advanced-cropper\">\u003C\u002Fa>\n  \u003Cbr>\n \t\u003Ca href=\"https:\u002F\u002Fadvanced-cropper.github.io\u002Fvue-advanced-cropper\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">Documentation\u003C\u002Fa> \u002F\n  \t\u003Ca href=\"https:\u002F\u002Fadvanced-cropper.github.io\u002Fvue-advanced-cropper\u002Fguides\u002Frecipes.html\" target=\"_blank\" rel=\"noopener noreferrer\">Examples\u003C\u002Fa> \u002F\n    \u003Ca href=\"https:\u002F\u002Fcodesandbox.io\u002Fs\u002Fvue-advanced-cropper-vue-3-yrxou?file=\u002Fsrc\u002FApp.vue\" target=\"_blank\" rel=\"noopener noreferrer\">Sandbox\u003C\u002Fa> \u002F \u003Ca href=\"https:\u002F\u002Fcodesandbox.io\u002Fs\u002Fvue-advanced-cropper-composition-api-5z0ww0?file=\u002Fsrc\u002FApp.vue\" target=\"_blank\" rel=\"noopener noreferrer\">Sandbox + Composition API\u003C\u002Fa>\n\u003C\u002Fp>\n\n\u003Ch2 align=\"center\"> \u003C\u002Fh2>\n\n---\n\n:fire: **HEADS UP!** You're currently looking at the branch for Vue 2. For the Vue 3 branch, [please check out the `vue-next` branch](https:\u002F\u002Fgithub.com\u002Fadvanced-cropper\u002Fvue-advanced-cropper\u002Ftree\u002Fvue-next).\n\n---\n\n**Vue Advanced Cropper** is the advanced library that allows you to create custom croppers suited for any website design.\nIt means that you can change not only the cropper's appearance but also its behavior.\n\nFeatures:\n\n- full mobile\u002Fdesktop support\n- support [all three main types of croppers](https:\u002F\u002Fadvanced-cropper.github.io\u002Fvue-advanced-cropper\u002Fintroduction\u002Ftypes.html) right out of the box\n- support both canvas and coordinates modes, minimum and maximum aspect ratios, custom size restrictions\n- zoom, rotate, resize image\n- auto-zoom, transitions\n\n![](https:\u002F\u002Fgithub.com\u002Fadvanced-cropper\u002Fvue-advanced-cropper\u002Fblob\u002Fmaster\u002Fexample\u002Freadme\u002Fexample.gif?raw=true)\n\nThe codesandbox for [mobile](https:\u002F\u002Fcodesandbox.io\u002Fs\u002Fvue-advanced-cropper-mobile-without-theme-h33bf) \u002F [desktop](https:\u002F\u002Fcodesandbox.io\u002Fs\u002Fvue-advanced-cropper-desktop-without-theme-4pp9f?file=\u002Fsrc\u002FApp.vue) examples above.\n\n## Install\n\n### Vue 3.0\n\n```bash\nnpm install --save vue-advanced-cropper\n```\n\n```bash\nyarn add vue-advanced-cropper\n```\n\n### Vue 2.0\n\n```bash\nnpm install --save vue-advanced-cropper@vue-2\n```\n\n```bash\nyarn add vue-advanced-cropper@vue-2\n```\n\nIf you would like to use a CDN, please read the corresponding [documentation section](https:\u002F\u002Fadvanced-cropper.github.io\u002Fvue-advanced-cropper\u002Fintroduction\u002Fgetting-started.html#using-cdn)\n\n## Usage\n\n```js\nimport Vue from 'vue'\nimport { Cropper } from 'vue-advanced-cropper'\nimport 'vue-advanced-cropper\u002Fdist\u002Fstyle.css';\n\nnew Vue({\n  el: '#app',\n  data: {\n    img: 'https:\u002F\u002Fimages.pexels.com\u002Fphotos\u002F226746\u002Fpexels-photo-226746.jpeg'\n  },\n  methods: {\n    change({coordinates, canvas}) {\n      console.log(coordinates, canvas)\n    }\n  },\n  components: {\n    Cropper\n  }\n})\n```\n\n```html\n\u003Cdiv id=\"app\">\n  \u003Ccropper\n    class=\"cropper\"\n    :src=\"img\"\n    :stencil-props=\"{\n      aspectRatio: 10\u002F12\n    }\"\n    @change=\"change\"\n  >\u003C\u002Fcropper>\n\u003C\u002Fdiv>\n```\n\n```\n\u002F*\n  You may need to set the limits for the cropper sizes or container sizes,\n  otherwise, a cropping image will try to fill all available space\n*\u002F\n.cropper {\n  height: 600px;\n  background: #DDD;\n}\n```\n\n\n## Cropper\n\n| Prop                      | Type                 | Description                                                     \t\t\t      | Default\n| ------------------------- | ------------------   | ---------------------------------------------------------------------------      | ---------------\n| src                       | `String`             | The cropping image (link \u002F base64)                              \t\t\t      |\n| stencilComponent          | `String`, `Object`   | The stencil component                                           \t\t\t      | `RectangleStencil`\n| stencilProps              | `Object`             | The props for the stencil component                             \t\t\t      | `{}`\n| class                     | `String`             | The optional class for the root cropper block                   \t\t\t      |\n| imageClass                | `String`             | The optional class for the cropping image                       \t\t\t      |\n| boundariesClass           | `String`             | The optional class for the area.                                \t\t\t      |\n| backgroundClass           | `String`             | The optional class for the background under the image           \t\t\t      |\n| autoZoom                  | `Boolean`            | Enable \u002F disable transitions                                     \t\t          | `false`\n| transitions               | `Boolean`            | Enable \u002F disable auto zoom                                     \t\t\t      | `true`\n| stencilSize               | `Object `            | The size of the stencil in pixels                                                |\n| debounce                  | `String`, `Number`   | The time before the `change` event will be emitted after changes (ms) \t\t\t      | `500`\n| canvas                    | `Boolean`            | The flag that indicates if canvas should be used                \t\t\t      | `true`\n| minWidth                  | `String`, `Number`   | The minimum width of the stencil (percents)                     \t\t\t      |\n| minHeight                 | `String`, `Number`   | The minimum height of the stencil (percents)                    \t\t\t      |\n| maxWidth                  | `String`, `Number`   | The maximum width of the stencil (percents)                     \t\t\t      |\n| maxHeight                 | `String`, `Number`   | The maximum height of the stencil (percents)                    \t\t\t      |\n| checkOrientation          | `Boolean`            | Check if EXIF orientation should be checked                     \t\t\t      | `true`\n| resizeImage               | `Boolean`, `Object`  | The options for the image resizing ([details](https:\u002F\u002Fadvanced-cropper.github.io\u002Fvue-advanced-cropper\u002Fcomponents\u002Fcropper.html#resizeimage)) | `true`\n| moveImage                 | `Boolean`, `Object`  | The options for the image moving ([details](https:\u002F\u002Fadvanced-cropper.github.io\u002Fvue-advanced-cropper\u002Fcomponents\u002Fcropper.html#moveimage)) | `true`\n| imageRestriction          | `String`             | Set restrictions for image position ('fill-area' 'fit-area', 'stencil', 'none')  | `'fill-area'`\n| defaultSize               | `Object`, `Function` | The function that returns the default size of the stencil or object              | `core.defaultSize`\n| defaultPosition           | `Object`, `Function` | The function that returns the default position of the stencil or object          | `core.defaultPosition`\n| defaultBoundaries         | `String`, `Function` | The function that determines the boundaries size or string (`'fill'`, `'fit'`)   | `'fill'`\n| sizeRestrictionsAlgorithm | `Function`           | The function that returns the restrictions object                 \t\t          |\n\n\n| Event                     | Description\n| ------------------------  | --------------------------------------------------------------\n| change                    | Invoked on the changing of a stencil's position\u002Fsize after mounting the component and on an image change\n| ready                     | Invoked on the success of an image loading\n| error                     | Invoked on an error of an image loading\n\n\n## RectangleStencil\n\n| Prop                      | Type                | Description                                                    | Default\n| ------------------------  | ------------------- | -------------------------------------------------------------- | ---------------\n| aspectRatio               | `Number`            | The aspect ratio                                               |\n| minAspectRatio            | `Number`            | The minimum aspect ratio                                       |\n| maxAspectRatio            | `Number`            | The maximum aspect ratio                                       |\n| class                     | `String`            | The class for the root block of the stencil component              |\n| previewClass              | `String`            | The class for the preview component                            |\n| movingClass               | `String`            | The class applied when the user drags the stencil                   |\n| resizingClass             | `String`            | The class applied when the user resizes the stencil                 |\n| boundingBoxClass          | `String`            | The class for the bounding box component                       |\n| handlerComponent          | `String`,`Object`   | The handler component                                          |\n| handlers                  | `Object`            | The object of handlers that should be visible or hidden.       |\n| handlersClasses           | `Object`            | The object of custom handler classes                           |\n| handlersWrappersClasses   | `Object`            | The object of custom handler wrapper classes                   |\n| lineComponent             | `String`,`Object`   | The handler component                                          |\n| lines                     | `Object`            | The object of the lines that should be visible or hidden.         |\n| linesClasses              | `Object`            | The object of custom line classes                              |\n| linesWrappersClasses      | `Object`            | The object of custom line wrapper classes                      |\n\n## License\n\nThe source code of this library is licensed under the MIT license, and the documentation and photos belong to their respective owners.\n","Vue Advanced Cropper 是一个高级的 Vue 裁剪库，能够帮助开发者创建适应任何网站设计需求的自定义裁剪工具。它支持全平台（移动\u002F桌面）使用，并且内置了三种主要类型的裁剪器，同时提供画布和坐标模式选择、最小最大宽高比设置及自定义尺寸限制等功能。此外，该库还支持图像缩放、旋转与调整大小等操作，以及自动缩放和平滑过渡效果。适用于需要高度定制化图片处理功能的各种Web应用开发场景中。","2026-06-11 03:20:42","top_language"]