{"_id":"42-antd-img-crop","_rev":"1-db10366d4605ece5c6b7fbb24b4b1c26","name":"42-antd-img-crop","dist-tags":{"latest":"4.12.3"},"versions":{"4.12.2":{"name":"42-antd-img-crop","version":"4.12.2","description":"An image cropper for Ant Design Upload","keywords":["react","antd","ant-design","upload","image","crop","cropper"],"license":"MIT","author":{"name":"nanxiaobei","email":"nanxiaobei@gmail.com","url":"https://github.com/nanxiaobei"},"homepage":"https://github.com/nanxiaobei/antd-img-crop","repository":{"type":"git","url":"git+https://github.com/nanxiaobei/antd-img-crop.git"},"bugs":{"url":"https://github.com/nanxiaobei/antd-img-crop/issues"},"main":"dist/antd-img-crop.cjs.js","module":"dist/antd-img-crop.esm.js","types":"dist/antd-img-crop.d.ts","scripts":{"build":"rm -rf dist && rollup -c --configPlugin @rollup/plugin-typescript"},"peerDependencies":{"antd":">=4.0.0","react":">=16.8.0","react-dom":">=16.8.0"},"dependencies":{"compare-versions":"6.0.0-rc.1","react-easy-crop":"^4.7.4","tslib":"^2.5.0"},"devDependencies":{"@rollup/plugin-replace":"^5.0.2","@rollup/plugin-typescript":"^11.1.0","@trivago/prettier-plugin-sort-imports":"^4.1.1","@types/node":"^18.15.11","@types/react":"^18.0.33","@types/react-dom":"^18.0.11","@vitejs/plugin-react":"^3.1.0","antd":"^5.4.0","autoprefixer":"^10.4.14","eslint":"^8.37.0","eslint-config-prettier":"^8.8.0","eslint-config-react-app":"^7.0.1","postcss":"^8.4.21","prettier":"^2.8.7","prettier-plugin-tailwindcss":"^0.2.7","react":"^18.2.0","react-dom":"^18.2.0","rollup":"3.20.2","rollup-plugin-dts":"^5.3.0","rollup-plugin-postcss":"^4.0.2","tailwindcss":"^3.3.1","typescript":"^5.0.3","vite":"^4.2.1"},"gitHead":"ae78347a5fb571d0b22d5fd765fa5131f277f9cc","_id":"42-antd-img-crop@4.12.2","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-DMYy6cuupvUi2I3O5WZf4Crzrq8U/XF48z+1PIknxfK2Y8ETaW1HIG2THp0o5ubBdFg8MhNxL+vjv7lywMtwmw==","shasum":"0d7ae971a82fcc7cce2382fb98e002f23a73b5ab","tarball":"https://registry.npmjs.org/42-antd-img-crop/-/42-antd-img-crop-4.12.2.tgz","fileCount":7,"unpackedSize":47998,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC+kOhnw4iHVLIVCnGRBQtPPtuEYeDbsGltVnlEHoBxMgIhAJLnPtL/EmWvQrPlkZb4cyDEPHOXV/0AB8omshUHkhJn"}]},"_npmUser":{"name":"xz87060361","email":"xz87060361@126.com"},"directories":{},"maintainers":[{"name":"xz87060361","email":"xz87060361@126.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/42-antd-img-crop_4.12.2_1687856706957_0.14715227302408396"},"_hasShrinkwrap":false},"4.12.3":{"name":"42-antd-img-crop","version":"4.12.3","description":"An image cropper for Ant Design Upload","keywords":["react","antd","ant-design","upload","image","crop","cropper"],"license":"MIT","author":{"name":"nanxiaobei","email":"nanxiaobei@gmail.com","url":"https://github.com/nanxiaobei"},"homepage":"https://github.com/nanxiaobei/antd-img-crop","repository":{"type":"git","url":"git+https://github.com/nanxiaobei/antd-img-crop.git"},"bugs":{"url":"https://github.com/nanxiaobei/antd-img-crop/issues"},"main":"dist/42-antd-img-crop.cjs.js","module":"dist/42-antd-img-crop.esm.js","types":"dist/42-antd-img-crop.d.ts","scripts":{"build":"rm -rf dist && rollup -c --configPlugin @rollup/plugin-typescript"},"peerDependencies":{"antd":">=4.0.0","react":">=16.8.0","react-dom":">=16.8.0"},"dependencies":{"compare-versions":"6.0.0-rc.1","react-easy-crop":"^4.7.4","tslib":"^2.5.0"},"devDependencies":{"@rollup/plugin-replace":"^5.0.2","@rollup/plugin-typescript":"^11.1.0","@trivago/prettier-plugin-sort-imports":"^4.1.1","@types/node":"^18.15.11","@types/react":"^18.0.33","@types/react-dom":"^18.0.11","@vitejs/plugin-react":"^3.1.0","antd":"^5.4.0","autoprefixer":"^10.4.14","eslint":"^8.37.0","eslint-config-prettier":"^8.8.0","eslint-config-react-app":"^7.0.1","postcss":"^8.4.21","prettier":"^2.8.7","prettier-plugin-tailwindcss":"^0.2.7","react":"^18.2.0","react-dom":"^18.2.0","rollup":"3.20.2","rollup-plugin-dts":"^5.3.0","rollup-plugin-postcss":"^4.0.2","tailwindcss":"^3.3.1","typescript":"^5.0.3","vite":"^4.2.1"},"gitHead":"b21f56c4adddb55ea7d655cfd703e673f0250deb","_id":"42-antd-img-crop@4.12.3","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-5rp/WoejAdRvDGYGJi8/OD/i669QU4ICaIWCmcW4MPqY9hlcUA6Mw/7TppbTEz7Z3Dlfi4HMwizrKSypL6ykMg==","shasum":"970168c60e5f0319adbd186934249a65f56ee265","tarball":"https://registry.npmjs.org/42-antd-img-crop/-/42-antd-img-crop-4.12.3.tgz","fileCount":7,"unpackedSize":48007,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDpwxjy3ar3XeuO7VLaspfsFexfLFkTJVFdAHCiS7FaXAIgdVVKRw0kbLSyFr6G2E8AcRRVRwwfFbLSUWpmcUwE7xM="}]},"_npmUser":{"name":"xz87060361","email":"xz87060361@126.com"},"directories":{},"maintainers":[{"name":"xz87060361","email":"xz87060361@126.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/42-antd-img-crop_4.12.3_1687857203759_0.3639620207437828"},"_hasShrinkwrap":false}},"time":{"created":"2023-06-27T09:05:06.956Z","4.12.2":"2023-06-27T09:05:07.135Z","modified":"2023-06-27T09:13:24.046Z","4.12.3":"2023-06-27T09:13:23.944Z"},"maintainers":[{"name":"xz87060361","email":"xz87060361@126.com"}],"description":"An image cropper for Ant Design Upload","homepage":"https://github.com/nanxiaobei/antd-img-crop","keywords":["react","antd","ant-design","upload","image","crop","cropper"],"repository":{"type":"git","url":"git+https://github.com/nanxiaobei/antd-img-crop.git"},"author":{"name":"nanxiaobei","email":"nanxiaobei@gmail.com","url":"https://github.com/nanxiaobei"},"bugs":{"url":"https://github.com/nanxiaobei/antd-img-crop/issues"},"license":"MIT","readme":"# antd-img-crop\n\nAn image cropper for Ant Design [Upload](https://ant.design/components/upload/)\n\n[![npm](https://img.shields.io/npm/v/antd-img-crop.svg?style=flat-square)](https://www.npmjs.com/package/antd-img-crop)\n[![npm](https://img.shields.io/npm/dt/antd-img-crop?style=flat-square)](https://www.npmtrends.com/antd-img-crop)\n[![npm bundle size](https://img.shields.io/bundlephobia/minzip/antd-img-crop?style=flat-square)](https://bundlephobia.com/result?p=antd-img-crop)\n[![GitHub](https://img.shields.io/github/license/nanxiaobei/antd-img-crop?style=flat-square)](https://github.com/nanxiaobei/antd-img-crop/blob/main/LICENSE)\n[![npm type definitions](https://img.shields.io/npm/types/typescript?style=flat-square)](https://github.com/nanxiaobei/antd-img-crop/blob/main/src/types.ts)\n\nEnglish | [简体中文](./README.zh-CN.md)\n\n## Install\n\n```sh\npnpm add antd-img-crop\n# or\nyarn add antd-img-crop\n# or\nnpm i antd-img-crop\n```\n\n## Usage\n\n```jsx harmony\nimport { Upload } from 'antd';\nimport ImgCrop from 'antd-img-crop';\n\nconst Demo = () => (\n  <ImgCrop>\n    <Upload>+ Add image</Upload>\n  </ImgCrop>\n);\n```\n\n[![Edit antd-img-crop](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/antd-img-crop-4qoom5p9x4?fontsize=14&hidenavigation=1&theme=dark)\n\n## Props\n\n| Prop           | Type       | Default        | Description                                                                |\n| -------------- | ---------- | -------------- | -------------------------------------------------------------------------- |\n| quality        | `number`   | `0.4`          | Cropped image quality, `0` to `1`                                          |\n| fillColor      | `string`   | `'white'`      | Fill color for cropped image                                               |\n| zoomSlider     | `boolean`  | `true`         | Enable zoom adjustment                                                     |\n| rotationSlider | `boolean`  | `false`        | Enable rotation adjustment                                                 |\n| aspectSlider   | `boolean`  | `false`        | Enable aspect adjustment                                                   |\n| showReset      | `boolean`  | `false`        | Show reset button to reset zoom rotation aspect                            |\n| resetText      | `string`   | `Reset`        | Reset button text                                                          |\n| aspect         | `number`   | `1 / 1`        | Aspect of crop area , `width / height`                                     |\n| minZoom        | `number`   | `1`            | Minimum zoom factor                                                        |\n| maxZoom        | `number`   | `3`            | Maximum zoom factor                                                        |\n| cropShape      | `string`   | `'rect'`       | Shape of crop area, `'rect'` or `'round'`                                  |\n| showGrid       | `boolean`  | `false`        | Show grid of crop area (third-lines)                                       |\n| cropperProps   | `object`   | -              | [react-easy-crop] props (\\* existing props cannot be overridden)           |\n| modalClassName | `string`   | `''`           | Modal classname                                                            |\n| modalTitle     | `string`   | `'Edit image'` | Modal title                                                                |\n| modalWidth     | `number`   | `string`       | Modal width                                                                |\n| modalOk        | `string`   |                | Ok button text                                                             |\n| modalCancel    | `string`   |                | Cancel button text                                                         |\n| onModalOk      | `function` | -              | Ok button callback                                                         |\n| onModalCancel  | `function` | -              | Cancel button, modal mask, top right \"x\" callback                          |\n| modalProps     | `object`   |                | [Ant Design Modal] props (\\* existing props cannot be overridden)          |\n| beforeCrop     | `function` | -              | Upload button callback, if return `false` or `reject`, modal will not open |\n\n## FAQ\n\n### `ConfigProvider` not work?\n\nTry to set `libraryDirectory`(`'es'` or `'lib'`) to `babel-plugin-import` config, see which one will work.\n\n```js\nmodule.exports = {\n  plugins: [\n    ['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }],\n  ],\n};\n```\n\n### No style? (only `antd<=v4`)\n\nIf you use `antd<=v4` + `babel-plugin-import`, and no `Modal` or `Slider` were imported, please import these styles manually:\n\n```js\nimport 'antd/es/modal/style';\nimport 'antd/es/slider/style';\n```\n\n## License\n\n[MIT License](https://github.com/nanxiaobei/antd-img-crop/blob/main/LICENSE) (c) [nanxiaobei](https://lee.so/)\n\n[react-easy-crop]: https://github.com/ricardo-ch/react-easy-crop#props\n[Ant Design Modal]: https://ant.design/components/modal#api\n\n## FUTAKE\n\nTry [**FUTAKE**](https://sotake.com/futake) in WeChat. A mini app for your inspiration moments. 🌈\n\n![](https://s3.bmp.ovh/imgs/2022/07/21/452dd47aeb790abd.png)\n\n```\n\n```\n","readmeFilename":"README.md"}