` or `
![]()
` tag.\n\n\n- **options** (`Object`, optional): *The configuration options, see [**Options**](#options).*\n\n### Example\n\n**Vanilla javascript**\n\n```html\n
\n\n\n\n\n
![](\"images/naruto.jpg\")
\n\n```\n\n**JQuery**\n\n```html\n
\n\n\n\n\n
\n\n```\n\n## Options\n\n### Container\n\n- Target: the container of the cropper.\n- Key: `container`\n- Parameters:\n - **width** (`int|string`, default: `300`): *the outer container width*\n - **height** (`int`, default: `300`): *the outer container height*\n\n#### Example\n\n```js\n// Fixed container\ncontainer: {\n width: 500,\n height: 400\n}\n// responsive container\ncontainer: {\n width: '100%',\n height: 400\n}\n```\n### Viewport\n\n- Target: the part that will be cropped.\n- Key: `viewport`\n- Parameters:\n - **width** (`int`, default: `100`): *the viewport width*\n - **height** (`int`, default: `100`): *the viewport height*\n - **type** (`string`, default: `square`, available: `circle`): *the viewport frame form*\n - **border** (`object`): *the viewport frame border*\n - **enable** (`bool`, default: `true`): *toggle the border*\n - **width** (`int`, default: `2`): *the border width*\n - **color** (`string`, unit: `hex, rgba, hsl`, default: `#fff`): *the border color*\n\n#### Example\n\n```js\nviewport: {\n width: 100,\n height: 100,\n type: 'circle',\n border: {\n enable: true,\n width: 2,\n color: '#fff'\n }\n}\n```\n\n### Zoom\n\n- Target: the image zoom options\n- Key: `zoom`,\n- Parameters:\n - **min** (`number`, default: `0.01`): *minimum zoom*\n - **max** (`number`, default: `3`): *maximum zoom*\n - **enable** (`bool`, default: `true`): *enable or disable the zoom feature*\n - **mouseWheel** (`bool`, default: `true`): *enable or disable mouse wheel zoom*\n - **slider** (`bool`, default: `false`): *toggle the slider input*\n\n#### Example\n\n```js\nzoom: {\n min: 0.01,\n max: 3,\n enable: true,\n mouseWheel: true,\n slider: false\n}\n```\n\n### Rotation\n\n- Target: the image rotation\n- Key: `rotation`\n- Parameters:\n - **enable** (`bool`, default: `true`): *enable or disable the rotation*\n - **slider** (`bool`, default: `false`): *toggle the slider input*\n - **position** (`string`, default: `right`, available: `right, left`): *the slider input position*\n\n#### Example\n\n```js\nrotation: {\n enable: true,\n slider: false,\n position: 'right'\n}\n```\n\n### Transform origin\n\n- Target: the image transform origin\n- Parameter:\n - **transformOrigin** (`string`, default: `viewport`,available: `image`, `viewport`)\\\n *image: the transform origin is the image center*\\\n *viewport: the transform origin is the viewport center*\n\n#### Example\n\n```js\n{\n transformOrigin: 'viewport'\n}\n```\n\n### Custom class\n\n- Target: the container class\n- Parameter:\n - **customClass** (`string`, default: `null`): *the class of the container*\n\n#### Example\n\n```js\n{\n customClass: 'my-custom-class'\n}\n```\n\n## Methods\n\n### bind()\n\n*Binds an image and return a promise after the image is loaded.*\n\n#### Arguments\n\nThe `bind()` method expects an `Object` containing:\n\n- **url** (required)\n - **type**: `String`\n - **description**: The url of the image to bind.\n- **position**\n - **x**: (`int`,the x translation coordinate).\n - **y**: (`int`,the y translation coordinate).\\\n The image is translated from its origin.\\\n If not specified, the image is centered horizontaly and verticaly.\n - **scale**: (`float`,The scale of the image, 1 is the original image size),\\\n If not specified, the image will takes the container's height and scale automatically.\n - **angle**: (`int`,The rotation of the image by an angle in degree around its origin).\n - **origin**: (`object`,The x and y coordonate of the image transform origin),\\\n if origin is set, the `transformOrigin` option will be override and set to `viewport`,\\\n since `image` option means that the transform origin is the center of the image,\\\n in that case `origin` is not required.\n\n\n#### Example\n\n```js\nvar container = $('#container').cropme();\n\ncontainer.cropme('bind', {\n url: 'images/naruto.jpg',\n position: {\n x: 230,\n y: -30,\n scale: 1.3,\n angle: 35,\n origin: {\n x: 623.26,\n y: 1150\n }\n },\n});\n\n// If you want to do some changes directly after binding the image\n\ncontainer.cropme('bind', {\n url: 'images/naruto.jpg',\n})\n.then(function(){\n //example\n container.cropme('rotate')\n});\n\n```\n\n### rotate()\n\n*Rotate the image to the given angle.*\n\n#### Arguments\n\n- **angle**\n - **description**: The angle the image will be rotated to.\\\n The rotation is not relative to the current image rotation.\n - **type**: `number`\n - **unit**: `degree`\n\n#### Example\n\n```js\nvar myImage = $('#myImage').cropme();\n\nmyImage.cropme('rotate', 90);\n```\n\n### crop()\n\n*Returns a promise with the cropped image.*\n\n#### Arguments\n\nAs a parameter, the `crop()` function can receive:\n\n1. An `Object` containing:\n - **type**\n - **type**: `String`\n - **default**: `base64`\n - **possible value**: `base64`, `blob`\n - **description**: The image exportation format\n - **width**\n - **type**: `int`\n - **description**: The width of the output images, the height will be \\\n proportional.\n - **scale**\n - **type**: `number`\n - **description**: The size of the ouput, relative to the original image size.\\\n If `scale` has a value, the `width` get ignored.\n - **mimetype**\n - **type**: `String`\n - **default**: `image/png`\n - **description**: The output image format.\n - **quality**\n - **type**: `number`\n - **default**: `0.92` (`0.80` for `image/webp` mimetype when output is blob).\n - **description**: A Number between `0` and `1` indicating image quality.\\\n Works only with `image/jpeg` or `image/webp` (formats that use lossy\n compression).\n2. A `String` specifying the exportation format (`base64` or `blob`)\n\n *For more information about `mimetype` and `quality` arguments: \\\n → [`toBlob()` and `toDataURL()` HTMLCanvasElement documentation](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement).*\n\nCalling `crop()` without parameters returns a **base64** image with the viewport size.\n\n#### Example\n\n```js\nvar myImage = $('#myImage').cropme();\n\n// string\nmyImage.cropme('crop', 'blob')\n .then(function(output) {\n // here you can use the blob output\n });\n\n// object\nmyImage.cropme('crop', {\n type: 'base64',\n width: 800\n}).then(function(output) {\n // here you can use the base64 output\n});\n\n\n// no parameter\nmyImage.cropme('crop')\n .then(function(output) {\n // here you can use the base64 output\n });\n```\n### position()\n\n*Returns an object specifying the image position*\\\nWhen you create a new cropme you can bind the image with this position object.\n\n#### Example\n\n```js\nvar myImage = $('#myImage').cropme();\n\nvar position = myImage.cropme('position');\n```\n\n**Output**: `Object`\n\n```js\n{\n x: 230,\n y: -30,\n scale: 1.3,\n angle: 35,\n origin: {\n x: 623.26,\n y: 1150\n }\n}\n```\n\n### reload()\n\n*Reload the cropme instance with a new parameters*\n\n#### Example\n\n```js\nvar myImage = $('#myImage').cropme({\n container: {\n width: 300,\n height: 200\n }\n});\n\nmyImage.cropme('reload', {\n container: {\n width: 455,\n height: 600\n },\n viewport: {\n width: 150,\n height: 240,\n border: {\n enable: true,\n width: 5,\n color: '#f00'\n }\n }\n});\n```\n\n### destroy()\n\n*Destroy the cropme instance*\n\n#### Example\n\n```js\nvar myImage = $('#myImage').cropme();\n\nmyImage.cropme('destroy');\n```\n\n## Contributing\n\nThank you for your contribution to this project.\n\n### Installation\n\nFork the project then\n\n```\nnpm install && npm run watch\n```\n","readmeFilename":"README.md","contributors":[{"name":"Pierre Ellul","email":"pierreellul.epi@gmail.com","url":"https://pellul.github.io"}]}
![\"Latest](\"https://img.shields.io/npm/v/cropme.svg\")
![\"NPM](\"https://img.shields.io/npm/dt/cropme.svg\")
\n![\"Package](\"https://img.shields.io/npm/l/cropme.svg\")
\n[](https://www.jsdelivr.com/package/npm/cropme)\n\n# Cropme\n\nCropme is a customizable and easy to use javascript image cropper plugin.\n\n[See the demo](https://shpontex.github.io/cropme)\n\n## Features\n\nSupport:\n\n- Two-dimensional translation\n- Scaling\n- Free rotation\n- Rotation and scale around the image center or the viewport center\n- Multi-touch support (pinch-zoom, two finger rotation, ...)\n- Base64 and blob exportation\n- Multiple croppers\n\n## Architecture\n\n```\ndist/\n├── cropme.css\n├── cropme.min.css (compressed)\n├── cropme.js (UMD)\n└── cropme.min.js (UMD, compressed)\n```\n\n## Installation\n\n**npm**\n\n```\nnpm install cropme\n```\n\n**Download**\n\n[Download the project](https://github.com/shpontex/cropme/archive/master.zip) and extract it.\\\nthen put the dist/cropme.min.css and the dist/cropme.min.js in you project.\n\n```html\n\n\n```\n\n**CDN**\n\n```html\n\n\n```\n\n## Usage\n\n### Syntax\n\n```js\nnew Cropme(element, options);\n```\n\n- **element** (`HTMLElement`, required): *the cropper wrapping HTML element, can be a `