{"id":21941811,"url":"https://github.com/advanced-cropper/vue-advanced-cropper","last_synced_at":"2025-05-14T05:10:44.123Z","repository":{"id":38776246,"uuid":"193229071","full_name":"advanced-cropper/vue-advanced-cropper","owner":"advanced-cropper","description":"The advanced vue cropper library that gives you opportunity to create your own croppers suited for any website design","archived":false,"fork":false,"pushed_at":"2024-06-09T10:02:48.000Z","size":41643,"stargazers_count":1068,"open_issues_count":35,"forks_count":139,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-05-12T19:07:25.510Z","etag":null,"topics":["advanced","cropper","flexible","library","vue","vue-cropper"],"latest_commit_sha":null,"homepage":"https://advanced-cropper.github.io/vue-advanced-cropper/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/advanced-cropper.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","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":"2019-06-22T12:00:57.000Z","updated_at":"2025-05-08T03:10:32.000Z","dependencies_parsed_at":"2024-08-30T04:16:58.240Z","dependency_job_id":null,"html_url":"https://github.com/advanced-cropper/vue-advanced-cropper","commit_stats":{"total_commits":337,"total_committers":14,"mean_commits":"24.071428571428573","dds":0.06528189910979232,"last_synced_commit":"c0c36528ba7f0a016c27d99ad0605c7a6fd687b5"},"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/advanced-cropper%2Fvue-advanced-cropper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/advanced-cropper%2Fvue-advanced-cropper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/advanced-cropper%2Fvue-advanced-cropper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/advanced-cropper%2Fvue-advanced-cropper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/advanced-cropper","download_url":"https://codeload.github.com/advanced-cropper/vue-advanced-cropper/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254076850,"owners_count":22010611,"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":["advanced","cropper","flexible","library","vue","vue-cropper"],"created_at":"2024-11-29T03:14:34.896Z","updated_at":"2025-05-14T05:10:44.091Z","avatar_url":"https://github.com/advanced-cropper.png","language":"Vue","funding_links":[],"categories":["Vue"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\u003ca href=\"https://advanced-cropper.github.io/vue-advanced-cropper/\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\u003cimg width=\"133\" src=\"https://github.com/advanced-cropper/vue-advanced-cropper/blob/master/example/readme/logo.svg?raw=true\u0026timestamp=1608385818575\" alt=\"Vue Advanced Cropper logo\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cbr/\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://npmcharts.com/compare/vue-advanced-cropper?minimal=true\"\u003e\u003cimg src=\"https://img.shields.io/npm/dm/vue-advanced-cropper.svg?sanitize=true\" alt=\"Downloads\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/vue-advanced-cropper\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/vue-advanced-cropper/vue-3.svg?sanitize=true\" alt=\"Version\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/vue-advanced-cropper\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/vue-advanced-cropper/vue-2.svg?sanitize=true\" alt=\"Version\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/vue-advanced-cropper\"\u003e\u003c/a\u003e\n  \u003cbr\u003e\n \t\u003ca href=\"https://advanced-cropper.github.io/vue-advanced-cropper/\" target=\"_blank\" rel=\"noopener noreferrer\"\u003eDocumentation\u003c/a\u003e /\n  \t\u003ca href=\"https://advanced-cropper.github.io/vue-advanced-cropper/guides/recipes.html\" target=\"_blank\" rel=\"noopener noreferrer\"\u003eExamples\u003c/a\u003e /\n    \u003ca href=\"https://codesandbox.io/s/vue-advanced-cropper-vue-3-yrxou?file=/src/App.vue\" target=\"_blank\" rel=\"noopener noreferrer\"\u003eSandbox\u003c/a\u003e / \u003ca href=\"https://codesandbox.io/s/vue-advanced-cropper-composition-api-5z0ww0?file=/src/App.vue\" target=\"_blank\" rel=\"noopener noreferrer\"\u003eSandbox + Composition API\u003c/a\u003e\n\u003c/p\u003e\n\n\u003ch2 align=\"center\"\u003e \u003c/h2\u003e\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://github.com/advanced-cropper/vue-advanced-cropper/tree/vue-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/desktop support\n- support [all three main types of croppers](https://advanced-cropper.github.io/vue-advanced-cropper/introduction/types.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://github.com/advanced-cropper/vue-advanced-cropper/blob/master/example/readme/example.gif?raw=true)\n\nThe codesandbox for [mobile](https://codesandbox.io/s/vue-advanced-cropper-mobile-without-theme-h33bf) / [desktop](https://codesandbox.io/s/vue-advanced-cropper-desktop-without-theme-4pp9f?file=/src/App.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://advanced-cropper.github.io/vue-advanced-cropper/introduction/getting-started.html#using-cdn)\n\n## Usage\n\n```js\nimport Vue from 'vue'\nimport { Cropper } from 'vue-advanced-cropper'\nimport 'vue-advanced-cropper/dist/style.css';\n\nnew Vue({\n  el: '#app',\n  data: {\n    img: 'https://images.pexels.com/photos/226746/pexels-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\"\u003e\n  \u003ccropper\n    class=\"cropper\"\n    :src=\"img\"\n    :stencil-props=\"{\n      aspectRatio: 10/12\n    }\"\n    @change=\"change\"\n  \u003e\u003c/cropper\u003e\n\u003c/div\u003e\n```\n\n```\n/*\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*/\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 / 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 / disable transitions                                     \t\t          | `false`\n| transitions               | `Boolean`            | Enable / 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://advanced-cropper.github.io/vue-advanced-cropper/components/cropper.html#resizeimage)) | `true`\n| moveImage                 | `Boolean`, `Object`  | The options for the image moving ([details](https://advanced-cropper.github.io/vue-advanced-cropper/components/cropper.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/size 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","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadvanced-cropper%2Fvue-advanced-cropper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fadvanced-cropper%2Fvue-advanced-cropper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadvanced-cropper%2Fvue-advanced-cropper/lists"}