` or `` tag. - **options** (`Object`, optional): *The configuration options, see [**Options**](#options).* ### Example **Vanilla javascript** ```html ``` **JQuery** ```html ``` ## Options ### Container - Target: the container of the cropper. - Key: `container` - Parameters: - **width** (`int|string`, default: `300`): *the outer container width* - **height** (`int`, default: `300`): *the outer container height* #### Example ```js // Fixed container container: { width: 500, height: 400 } // responsive container container: { width: '100%', height: 400 } ``` ### Viewport - Target: the part that will be cropped. - Key: `viewport` - Parameters: - **width** (`int`, default: `100`): *the viewport width* - **height** (`int`, default: `100`): *the viewport height* - **type** (`string`, default: `square`, available: `circle`): *the viewport frame form* - **border** (`object`): *the viewport frame border* - **enable** (`bool`, default: `true`): *toggle the border* - **width** (`int`, default: `2`): *the border width* - **color** (`string`, unit: `hex, rgba, hsl`, default: `#fff`): *the border color* #### Example ```js viewport: { width: 100, height: 100, type: 'circle', border: { enable: true, width: 2, color: '#fff' } } ``` ### Zoom - Target: the image zoom options - Key: `zoom`, - Parameters: - **min** (`number`, default: `0.01`): *minimum zoom* - **max** (`number`, default: `3`): *maximum zoom* - **enable** (`bool`, default: `true`): *enable or disable the zoom feature* - **mouseWheel** (`bool`, default: `true`): *enable or disable mouse wheel zoom* - **slider** (`bool`, default: `false`): *toggle the slider input* #### Example ```js zoom: { min: 0.01, max: 3, enable: true, mouseWheel: true, slider: false } ``` ### Rotation - Target: the image rotation - Key: `rotation` - Parameters: - **enable** (`bool`, default: `true`): *enable or disable the rotation* - **slider** (`bool`, default: `false`): *toggle the slider input* - **position** (`string`, default: `right`, available: `right, left`): *the slider input position* #### Example ```js rotation: { enable: true, slider: false, position: 'right' } ``` ### Transform origin - Target: the image transform origin - Parameter: - **transformOrigin** (`string`, default: `viewport`,available: `image`, `viewport`)\ *image: the transform origin is the image center*\ *viewport: the transform origin is the viewport center* #### Example ```js { transformOrigin: 'viewport' } ``` ### Custom class - Target: the container class - Parameter: - **customClass** (`string`, default: `null`): *the class of the container* #### Example ```js { customClass: 'my-custom-class' } ``` ## Methods ### bind() *Binds an image and return a promise after the image is loaded.* #### Arguments The `bind()` method expects an `Object` containing: - **url** (required) - **type**: `String` - **description**: The url of the image to bind. - **position** - **x**: (`int`,the x translation coordinate). - **y**: (`int`,the y translation coordinate).\ The image is translated from its origin.\ If not specified, the image is centered horizontaly and verticaly. - **scale**: (`float`,The scale of the image, 1 is the original image size),\ If not specified, the image will takes the container's height and scale automatically. - **angle**: (`int`,The rotation of the image by an angle in degree around its origin). - **origin**: (`object`,The x and y coordonate of the image transform origin),\ if origin is set, the `transformOrigin` option will be override and set to `viewport`,\ since `image` option means that the transform origin is the center of the image,\ in that case `origin` is not required. #### Example ```js var container = $('#container').cropme(); container.cropme('bind', { url: 'images/naruto.jpg', position: { x: 230, y: -30, scale: 1.3, angle: 35, origin: { x: 623.26, y: 1150 } }, }); // If you want to do some changes directly after binding the image container.cropme('bind', { url: 'images/naruto.jpg', }) .then(function(){ //example container.cropme('rotate') }); ``` ### rotate() *Rotate the image to the given angle.* #### Arguments - **angle** - **description**: The angle the image will be rotated to.\ The rotation is not relative to the current image rotation. - **type**: `number` - **unit**: `degree` #### Example ```js var myImage = $('#myImage').cropme(); myImage.cropme('rotate', 90); ``` ### crop() *Returns a promise with the cropped image.* #### Arguments As a parameter, the `crop()` function can receive: 1. An `Object` containing: - **type** - **type**: `String` - **default**: `base64` - **possible value**: `base64`, `blob` - **description**: The image exportation format - **width** - **type**: `int` - **description**: The width of the output images, the height will be \ proportional. - **scale** - **type**: `number` - **description**: The size of the ouput, relative to the original image size.\ If `scale` has a value, the `width` get ignored. - **mimetype** - **type**: `String` - **default**: `image/png` - **description**: The output image format. - **quality** - **type**: `number` - **default**: `0.92` (`0.80` for `image/webp` mimetype when output is blob). - **description**: A Number between `0` and `1` indicating image quality.\ Works only with `image/jpeg` or `image/webp` (formats that use lossy compression). 2. A `String` specifying the exportation format (`base64` or `blob`) *For more information about `mimetype` and `quality` arguments: \ → [`toBlob()` and `toDataURL()` HTMLCanvasElement documentation](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement).* Calling `crop()` without parameters returns a **base64** image with the viewport size. #### Example ```js var myImage = $('#myImage').cropme(); // string myImage.cropme('crop', 'blob') .then(function(output) { // here you can use the blob output }); // object myImage.cropme('crop', { type: 'base64', width: 800 }).then(function(output) { // here you can use the base64 output }); // no parameter myImage.cropme('crop') .then(function(output) { // here you can use the base64 output }); ``` ### position() *Returns an object specifying the image position*\ When you create a new cropme you can bind the image with this position object. #### Example ```js var myImage = $('#myImage').cropme(); var position = myImage.cropme('position'); ``` **Output**: `Object` ```js { x: 230, y: -30, scale: 1.3, angle: 35, origin: { x: 623.26, y: 1150 } } ``` ### reload() *Reload the cropme instance with a new parameters* #### Example ```js var myImage = $('#myImage').cropme({ container: { width: 300, height: 200 } }); myImage.cropme('reload', { container: { width: 455, height: 600 }, viewport: { width: 150, height: 240, border: { enable: true, width: 5, color: '#f00' } } }); ``` ### destroy() *Destroy the cropme instance* #### Example ```js var myImage = $('#myImage').cropme(); myImage.cropme('destroy'); ``` ## Contributing Thank you for your contribution to this project. ### Installation Fork the project then ``` npm install && npm run watch ```