\n\n---\n\n:fire: **HEADS UP!** You're currently looking at the branch for Vue 3. For the Vue 2, [please check out `master` branch](https://github.com/advanced-cropper/vue-advanced-cropper).\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\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@vue-3\n```\n\n```bash\nyarn add vue-advanced-cropper@next\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
\n \n
\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","engines":{"npm":">=5","node":">=8"},"gitHead":"ac6bb8b6bfa1424f37469eba1f77de60601d8ff0","license":"MIT","scripts":{"lint":"eslint src/**/*.{js,vue}","test":"cross-env NODE_ENV=test jest","build":"cross-env NODE_ENV=production rollup -c && node build/build.js","start":"cross-env NODE_ENV=build rollup -c -w","deploy":"gh-pages -d example/docs/.vuepress/dist","prepare":"npm run build","lint:fix":"eslint --fix src/**/*.{js,vue}","predeploy":"cd example && npm install && npm run build"},"_npmUser":{"name":"norserium","email":"norserium@yandex.ru"},"homepage":"https://github.com/advanced-cropper/vue-advanced-cropper#readme","jsdelivr":"dist/index.global.js","keywords":["vue","cropper","library","advanced","lightweight","customizable","flex"],"repository":{"url":"git+https://github.com/advanced-cropper/vue-advanced-cropper.git","type":"git"},"_npmVersion":"6.14.16","description":"The advanced library to create your own croppers suited for any website design","directories":{},"lint-staged":{"*.{js,vue,ts}":["prettier --write","eslint","git add"]},"maintainers":[{"name":"norserium","email":"norserium@yandex.ru"}],"_nodeVersion":"12.22.12","dependencies":{"debounce":"^1.2.0","easy-bem":"^1.0.2","classnames":"^2.2.6"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"vue":"~3.1.5","jest":"^26.6.1","sass":"^1.26.10","husky":"^3.1.0","eslint":"^5.16.0","rollup":"^2.26.10","ts-jest":"^26.4.3","gh-pages":"^1.2.0","prettier":"^2.1.2","cross-env":"^5.2.1","babel-jest":"^24.9.0","typescript":"^4.0.5","@babel/core":"^7.11.6","@types/jest":"^26.0.15","lint-staged":"^9.5.0","sass-loader":"^7.3.1","autoprefixer":"^9.8.6","babel-eslint":"^9.0.0","babel-preset-env":"^1.7.0","@vue/compiler-sfc":"~3.1.5","eslint-plugin-vue":"^5.2.3","rollup-plugin-vue":"^6.0.0","@rollup/plugin-url":"^5.0.1","eslint-plugin-node":"^7.0.1","rollup-plugin-scss":"^3.0.0","jest-expect-message":"^1.0.2","@rollup/plugin-babel":"^5.0.4","babel-preset-stage-0":"^6.24.1","eslint-plugin-import":"^2.22.0","rollup-plugin-terser":"^7.0.2","@vue/babel-preset-app":"^3.12.1","eslint-plugin-promise":"^4.2.1","@rollup/plugin-replace":"^2.3.3","eslint-config-prettier":"^6.11.0","eslint-config-standard":"^11.0.0","eslint-plugin-prettier":"^3.1.4","eslint-plugin-standard":"^3.1.0","eslint-plugin-vue-libs":"^4.0.0","@rollup/plugin-commonjs":"^13.0.0","rollup-plugin-visualizer":"^1.1.1","@rollup/plugin-typescript":"^6.1.0","@typescript-eslint/parser":"^4.6.0","@rollup/plugin-node-resolve":"^9.0.0","@babel/plugin-external-helpers":"^7.10.4","@typescript-eslint/eslint-plugin":"^2.34.0","rollup-plugin-peer-deps-external":"^2.2.3"},"peerDependencies":{"vue":"^3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-advanced-cropper_2.8.9_1717930160221_0.16422005013122343","host":"s3://npm-registry-packages"},"_id":"vue-advanced-cropper@2.8.9","version":"2.8.9"}
![\"Vue](\"https://github.com/advanced-cropper/vue-advanced-cropper/blob/master/example/readme/logo.svg?raw=true×tamp=1608385818575\"){kind=logo}
![\"Downloads\"](\"https://img.shields.io/npm/dm/vue-advanced-cropper.svg?sanitize=true\")
\n ![\"Version\"](\"https://img.shields.io/npm/v/vue-advanced-cropper/vue-3.svg?sanitize=true\")
\n ![\"Version\"](\"https://img.shields.io/npm/v/vue-advanced-cropper/vue-2.svg?sanitize=true\")
\n \n