### Setup for Real-time Preview

Source: https://advanced-cropper.github.io/vue-advanced-cropper/guides/recipes.html

Import and register the Cropper and Preview components. This setup is necessary for implementing a live preview of the cropping result.

```javascript
import { Cropper, Preview } from 'vue-advanced-cropper';

export default {
	components: {
		Cropper,
		Preview
	},
	data() {
		return {
			img: 'https://images.unsplash.com/photo-1590291409749-452efbe0d76c?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80',
			result: {
				coordinates: null,
				image: null
			}
		};
	},
	methods: {
		onChange({ coordinates, image }) {
			this.result = {
				coordinates,
				image
			};
		},
	},
};

```

--------------------------------

### Install with npm

Source: https://advanced-cropper.github.io/vue-advanced-cropper/introduction/getting-started.html

Install the library using npm. For Vue 2, use 'npm install -S vue-advanced-cropper@vue-2'.

```bash
npm install -S vue-advanced-cropper

```

--------------------------------

### Minimal Working Example (Template)

Source: https://advanced-cropper.github.io/vue-advanced-cropper/introduction/getting-started.html

The template section for the minimal working example, binding the image source and handling the change event.

```html
<cropper
	class="cropper"
	:src="img"
	:stencil-props="{
		aspectRatio: 10/12
	}"
	@change="change"
/>

```

--------------------------------

### Minimum Vue Advanced Cropper Example

Source: https://advanced-cropper.github.io/vue-advanced-cropper

This is the minimum working example to integrate the Vue Advanced Cropper into your website. It requires importing the component and its styles, and provides a basic setup for image cropping.

```vue
<template>
	<cropper
		:src="img"
		@change="change"
	/>
</template>

<script>
import { Cropper } from 'vue-advanced-cropper';
import 'vue-advanced-cropper/dist/style.css';

export default {
	components: {
		Cropper,
	},
	data() {
		return {
			img: 'https://images.pexels.com/photos/4323307/pexels-photo-4323307.jpeg',
		};
	},
	methods: {
		change({ coordinates, canvas }) {
			console.log(coordinates, canvas);
		},
	},
};
</script>

```

--------------------------------

### Install with yarn

Source: https://advanced-cropper.github.io/vue-advanced-cropper/introduction/getting-started.html

Install the library using yarn. For Vue 2, use 'yarn add vue-advanced-cropper@vue-2'.

```bash
yarn add vue-advanced-cropper

```

--------------------------------

### Minimal Working Example (Vue Component)

Source: https://advanced-cropper.github.io/vue-advanced-cropper/introduction/getting-started.html

A basic Vue component demonstrating the integration of the Cropper. Register the component locally or globally.

```javascript
import { Cropper } from 'vue-advanced-cropper';
import 'vue-advanced-cropper/dist/style.css';

export default {
	components: {
		Cropper,
	},
	data() {
	    return {
	        img: 'https://images.unsplash.com/photo-1600984575359-310ae7b6bdf2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=80',
	    }
	},
	methods: {
		change({ coordinates, canvas }) {
			console.log(coordinates, canvas)
		}
	},
}

```

--------------------------------

### Custom Stencil Component Example

Source: https://advanced-cropper.github.io/vue-advanced-cropper/introduction/concepts.html

This example demonstrates how to create a custom stencil component. It includes handlers for resize and move events, and uses default components like StencilPreview, BoundingBox, and DraggableArea.

```javascript
import { StencilPreview, BoundingBox, DraggableArea } from 'vue-advanced-cropper';

export default {
	components: {
		StencilPreview,
		BoundingBox,
		DraggableArea,
	},
	props: [
		// Image object
		'image',
		// Actual coordinates of the cropped fragment
		'coordinates',
		// Stencil size desired by cropper
		'stencilCoordinates',
		// Aspect ratios
		aspectRatio',
		'minAspectRatio',
		'maxAspectRatio',
		// Transitions:
		'transitions'
	],
	computed: {
		style() {
			const { height, width, left, top } = this.stencilCoordinates;
			const style = {
				position: 'absolute',
				width: `${width}px`,
				height: `${height}px`,
				transform: `translate(${left}px, ${top}px)`,
			};
			if (this.transitions && this.transitions.enabled) {
				style.transition = `${this.transitions.time}ms ${this.transitions.timingFunction}`;
			}
			return style;
		},
	},
	methods: {
		onMove(moveEvent) {
			this.$emit('move', moveEvent);
		},
		onMoveEnd() {
			this.$emit('moveEnd');
		},
		onResize(resizeEvent) {
			this.$emit('resize', resizeEvent);
		},
		onResizeEnd() {
			this.$emit('resizeEnd');
		},
		aspectRatios() {
			return {
				minimum: this.aspectRatio || this.minAspectRatio,
				maximum: this.aspectRatio || this.maxAspectRatio,
			};
		},
	},
};

```

```html
<template>
	<div :style="style">
		<bounding-box @resize="onResize" @resize-end="onMoveEnd">
			<draggable-area @move="onMove" @move-end="onMoveEnd">
				<stencil-preview
					:image="image"
					:width="stencilCoordinates.width"
					:height="stencilCoordinates.height"
					:coordinates="coordinates"
					:transitions="transitions"
				/>
			</draggable-area>
		</bounding-box>
	</div>
</template>

```

--------------------------------

### Import Cropper Component

Source: https://advanced-cropper.github.io/vue-advanced-cropper/introduction/getting-started.html

Import the Cropper component and its default styles after installation.

```javascript
import { Cropper } from 'vue-advanced-cropper';
import 'vue-advanced-cropper/dist/style.css';

```

--------------------------------

### Default Stencil Component Example

Source: https://advanced-cropper.github.io/vue-advanced-cropper

This example demonstrates a default stencil component that includes handlers for resizing and a draggable area for moving. It utilizes StencilPreview, BoundingBox, and DraggableArea components.

```vue
<script>
import { StencilPreview, BoundingBox, DraggableArea } from 'vue-advanced-cropper';

export default {
	components: {
		StencilPreview,
		BoundingBox,
		DraggableArea,
	},
	props: [
		// Image object
		'image',
		// Actual coordinates of the cropped fragment
		'coordinates',
		// Stencil size desired by cropper
		'stencilCoordinates',
		// Aspect ratios
		aspectRatio',
		'minAspectRatio',
		'maxAspectRatio',
		// Transitions:
		'transitions'
	],
	computed: {
		style() {
			const { height, width, left, top } = this.stencilCoordinates;
			const style = {
				position: 'absolute',
				width: `${width}px`,
				height: `${height}px`,
				transform: `translate(${left}px, ${top}px)`,
			};
			if (this.transitions && this.transitions.enabled) {
				style.transition = `${this.transitions.time}ms ${this.transitions.timingFunction}`;
			}
			return style;
		},
	},
	methods: {
		onMove(moveEvent) {
			this.$emit('move', moveEvent);
		},
		onMoveEnd() {
			this.$emit('moveEnd');
		},
		onResize(resizeEvent) {
			this.$emit('resize', resizeEvent);
		},
		onResizeEnd() {
			this.$emit('resizeEnd');
		},
		aspectRatios() {
			return {
				minimum: this.aspectRatio || this.minAspectRatio,
				maximum: this.aspectRatio || this.maxAspectRatio,
			};
		},
	},
};
</script>

<template>
	<div :style="style">
		<bounding-box @resize="onResize" @resize-end="onMoveEnd">
			<draggable-area @move="onMove" @move-end="onMoveEnd">
				<stencil-preview
					:image="image"
					:width="stencilCoordinates.width"
					:height="stencilCoordinates.height"
					:coordinates="coordinates"
					:transitions="transitions"
				/>
			</draggable-area>
		</bounding-box>
	</div>
</template>

```

--------------------------------

### Integrate Handler and Preview in a Circle Stencil

Source: https://advanced-cropper.github.io/vue-advanced-cropper/guides/advanced-stencil.html

This example demonstrates how to add a handler image and a `StencilPreview` component to a circular stencil. It includes necessary imports and styling for the preview and handler elements.

```javascript
<script>

import { StencilPreview } from 'vue-advanced-cropper'

export default {
	components: {
		StencilPreview
	},
	props: {
		image: {
			type: Object
		},
		coordinates: {
			type: Object,
		},
		transitions: {
			type: Object,
		},
		stencilCoordinates: {
			type: Object,
		},
	},
	methods: {
		aspectRatios() {
			return {
				minimum: 1,
				maximum: 1
			};
		}
	},
	computed: {
		style() {
			const { height, width, left, top } = this.stencilCoordinates;
			return {
				width: `${width}px`,
				height: `${height}px`,
				transform: `translate(${left}px, ${top}px)`
			};
		}
	}
};
</script>

<template>
  	<div class="circle-stencil" :style="style">
	 	<img :src="require('./assets/handler.svg')" @mousedown.prevent>
        <stencil-preview
        	class="circle-stencil__preview"
			:image="image"
			:coordinates="coordinates"
			:width="stencilCoordinates.width"
			:height="stencilCoordinates.height"
			:transitions="transitions"
      	/>
  	</div>
</template>

<style>
.circle-stencil {
	border-radius: 50%;
	cursor: move;
	position: absolute;
	border: dashed 2px white;
	box-sizing: border-box;
	&__handler {
		position: absolute;
		right: 15%;
		top: 14%;
		z-index: 1;
		cursor: ne-resize;
		width: 30px;
		height: 30px;
		display: flex;
		align-items: center;
		justify-content: center;
		transform: translate(50%, -50%);
	}
	&__preview {
		border-radius: 50%;
		overflow: hidden;
	}
}
</style>

```

--------------------------------

### Fixed Stencil Example

Source: https://advanced-cropper.github.io/vue-advanced-cropper/guides/advanced-recipes.html

Use this configuration to create a fixed stencil, which is particularly useful for mobile devices where the cropping area should not be changed by the user.

```html
<cropper
	src="https://images.unsplash.com/photo-1527137342181-19aab11a8ee8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80"
	:stencil-size="{
		width: 300,
		height: 300
	}"
	:stencil-props="{
		handlers: {},
		movable: false,
		resizable: false,
		aspectRatio: 1,
	}"
    image-restriction="stencil"
/>


```

--------------------------------

### Cropper Component Setup for Programmatic Manipulation

Source: https://advanced-cropper.github.io/vue-advanced-cropper/guides/advanced-recipes.html

Set up the cropper component in your template, assigning a ref to it (e.g., `ref="cropper"`) to enable programmatic control via methods like `zoom` and `move`.

```html
<cropper
	ref="cropper"
	:src="image"
/>
```

--------------------------------

### Load Image from Disc

Source: https://advanced-cropper.github.io/vue-advanced-cropper/guides/recipes.html

This example shows how to load an image from a file input using Blob and FileReader. It includes a helper function to detect the image MIME type.

```javascript
import { Cropper } from 'vue-advanced-cropper'

// This function is used to detect the actual image type, 
function getMimeType(file, fallback = null) {
	const byteArray = (new Uint8Array(file)).subarray(0, 4);
    let header = '';
    for (let i = 0; i < byteArray.length; i++) {
       header += byteArray[i].toString(16);
    }
	sswitch (header) {
        case "89504e47":
            return "image/png";
        case "47494638":
            return "image/gif";
        case "ffd8ffe0":
        case "ffd8ffe1":
        case "ffd8ffe2":
        case "ffd8ffe3":
        case "ffd8ffe8":
            return "image/jpeg";
        default:
            return fallback;
    }
}

export default {
	components: {
		Cropper,
	},
	data() {
		return {
			image: {
				src: null,
				type: null
			}
		};
	},
	methods: {
		crop() {
			const { canvas } = this.$refs.cropper.getResult();
			canvas.toBlob((blob) => {
				// Do something with blob: upload to a server, download and etc.
			}, this.image.type);
		},
		reset() {
			this.image = {
				src: null,
				type: null
			}
		},
		loadImage(event) {
			// Reference to the DOM input element
			const { files } = event.target;
			// Ensure that you have a file before attempting to read it
			if (files && files[0]) {
				// 1. Revoke the object URL, to allow the garbage collector to destroy the uploaded before file
				if (this.image.src) {
					URL.revokeObjectURL(this.image.src)
				}
				// 2. Create the blob link to the file to optimize performance:
				const blob = URL.createObjectURL(files[0]);
				
				// 3. The steps below are designated to determine a file mime type to use it during the 
				// getting of a cropped image from the canvas. You can replace it them by the following string, 
				// but the type will be derived from the extension and it can lead to an incorrect result:
				//
				// this.image = {
				//    src: blob;
				//    type: files[0].type
				// }
				
				// Create a new FileReader to read this image binary data
				const reader = new FileReader();
				// Define a callback function to run, when FileReader finishes its job
				reader.onload = (e) => {
					// Note: arrow function used here, so that "this.image" refers to the image of Vue component
					this.image = {
						// Set the image source (it will look like blob:http://example.com/2c5270a5-18b5-406e-a4fb-07427f5e7b94)
						src: blob,
						// Determine the image type to preserve it during the extracting the image from canvas:
						type: getMimeType(e.target.result, files[0].type),
					};
				};
				// Start the reader job - read file as a data url (base64 format)
				reader.readAsArrayBuffer(files[0]);
			}
		},
	},
	destroyed() {
		// Revoke the object URL, to allow the garbage collector to destroy the uploaded before file
		if (this.image.src) {
			URL.revokeObjectURL(this.image.src)
		}
	}
};

```

--------------------------------

### Function for sizeRestrictionsAlgorithm

Source: https://advanced-cropper.github.io/vue-advanced-cropper/components/cropper.html

Customizes size restrictions for the cropper's stencil. This example interprets min/max width and height as percentages of the image size, allowing for responsive sizing.

```javascript
({ minWidth, minHeight, maxWidth, maxHeight, imageSize }) => {
	return {
		maxWidth: imageSize.width * (maxWidth || 0) / 100,
		maxHeight: imageSize.height * (maxHeight || 0) / 100,
		minWidth: imageSize.width * (minWidth || 100) / 100,
		minHeight: imageSize.height * (minHeight || 100) / 100,
	}
}
```

--------------------------------

### Function for defaultVisibleArea

Source: https://advanced-cropper.github.io/vue-advanced-cropper/components/cropper.html

Dynamically calculates the visible area based on current coordinates, boundaries, and image size. This example expands the visible area by 100 pixels on all sides.

```javascript
({ coordinates, boundaries, imageSize }) => {
	return {
		left: coordinates.left - 50,
		top: coordinates.top - 50,
		width: coordinates.width + 100,
		height: coordinates.height + 100,
	}
}
```

--------------------------------

### Getting Image Data from Cropper

Source: https://advanced-cropper.github.io/vue-advanced-cropper/components/preview.html

It is recommended to use the `image` property directly from the cropper's results object to populate the preview component.

```javascript
const { image } = this.$refs.cropper.getResult()

```

--------------------------------

### Emitting ResizeEvent

Source: https://advanced-cropper.github.io/vue-advanced-cropper/events/resize-event.html

Emit a ResizeEvent to programmatically resize a stencil. This example shows how to specify pixel shifts for each direction and preserve the aspect ratio.

```javascript
// For example, inside a method of your stencil
this.$emit('move', new ResizeEvent(
	{
		left: leftShift,
		right: rightShift,
		top: topShift,
		bottom: bottomShift,
	},
	{
		preserveAspectRatio: true
	}
))

```

--------------------------------

### Registering Custom Stencil Components

Source: https://advanced-cropper.github.io/vue-advanced-cropper/guides/recipes.html

Import and register custom stencil components in your Vue application if they are not globally registered. This example shows how to import CircleStencil and register it.

```javascript
import { CircleStencil, Cropper } from 'vue-advanced-cropper';

export default {
	components: {
		Cropper, CircleStencil
	},
	data() {
		return {
			img: 'https://images.unsplash.com/photo-1485178575877-1a13bf489dfe?ixlib=rb-1.2.1&auto=format&fit=crop&w=991&q=80',
		};
	},
};

```

--------------------------------

### Upload Cropped Image to Server

Source: https://advanced-cropper.github.io/vue-advanced-cropper/guides/recipes.html

This snippet demonstrates how to get the cropped image as a blob and upload it to a server using the fetch API. It's suitable for backends that accept multipart/form-data. Ensure your backend is configured to handle image uploads.

```javascript
import { Cropper } from 'vue-advanced-cropper';

export default {
	components: {
		Cropper,
	},
	data() {
		return {
			image: 'https://images.unsplash.com/photo-1591273531346-ba9262aa2da6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=751&q=80',
		};
	},
	methods: {
		reset() {
			this.image = null;
		},
		uploadImage() {
			const { canvas } = this.$refs.cropper.getResult();
			if (canvas) {
				const form = new FormData();
				canvas.toBlob(blob => {
					form.append('file', blob);
					// You can use axios, superagent and other libraries instead here
					fetch('http://example.com/upload/', {
						method: 'POST',
						body: form,
					});
					// Perhaps you should add the setting appropriate file format here
				}, 'image/jpeg');
			}
		},
	},
};

```

--------------------------------

### Pass Props to Stencil Component

Source: https://advanced-cropper.github.io/vue-advanced-cropper/guides/recipes.html

Use the 'stencil-props' prop to pass configuration options like aspect ratio, movability, and resizability to the active stencil component. This example sets a fixed aspect ratio and disables movement and resizing.

```html
<cropper
	:stencil-props="{
		aspectRatio: 6/9,
		movable: false,
		resizable: false
	}"
/>

```

--------------------------------

### Import Classic Theme CSS

Source: https://advanced-cropper.github.io/vue-advanced-cropper/guides/theming.html

Load the classic theme, which is the default theme with comprehensive styling. Import this CSS file to use the classic theme.

```css
import 'vue-advanced-cropper/dist/theme.classic.css';
```

--------------------------------

### Customize Line Appearance

Source: https://advanced-cropper.github.io/vue-advanced-cropper/guides/customize-appearance.html

Modify the appearance of lines by applying custom CSS to the `.line` class, for example, changing border style and color.

```css
.line {
	border-style: dashed;
	border-color: red;
}
```

--------------------------------

### Import Default Styles

Source: https://advanced-cropper.github.io/vue-advanced-cropper/guides/theming.html

Load the basic styles required for the cropper components to display correctly. This is the first step to enable any theme.

```javascript
import 'vue-advanced-cropper/dist/style.css';
```

--------------------------------

### Props

Source: https://advanced-cropper.github.io/vue-advanced-cropper/components/preview.html

Configuration options for the Preview component.

```APIDOC
## Props

### `image`

* **Type:** `Object`
* **Default:** `null`
* **Details:** The object containing data about the cropped image. It should have at least a `src` field (string). Other optional fields include `width` (number), `height` (number), and `transforms` (object with `rotate` and `flip` properties).

### `coordinates`

* **Type:** `Object`
* **Default:** `{}`
* **Details:** An object representing the actual coordinates of the cropped fragment.

### `width`

* **Type:** `Number`
* **Details:** The desired width of the preview. If not provided, the preview will automatically determine its width based on its root element.

### `height`

* **Type:** `Number`
* **Details:** The desired height of the preview. If not provided, the preview will automatically determine its height based on its root element.
```

--------------------------------

### Recommended Fixed Cropper Implementation

Source: https://advanced-cropper.github.io/vue-advanced-cropper/introduction/types.html

The recommended implementation for a fixed cropper, combining fixed stencil size and static properties.

```html
<cropper
	:src="img"
	:stencil-props="{
		handlers: {},
		movable: false,
		resizable: false,
	}"
	:stencil-size="{
		width: 280,
		height: 280
	}"
	image-restriction="stencil"
 />

```

--------------------------------

### Implement Real-time Preview

Source: https://advanced-cropper.github.io/vue-advanced-cropper/guides/recipes.html

Use the Preview component alongside the Cropper, setting debounce to false for immediate updates. The preview component displays the cropped area in real-time.

```html
<div id="app">
	<cropper
		:src="img"
		@change="onChange"
		:debounce="false"
		:stencil-props="{
			aspectRatio: 1
		}"
	/>
	<preview
		:width="120"
		:height="120"
		:image="result.image"
		:coordinates="result.coordinates"
	/>
</div>

```

--------------------------------

### Import Cropper Styles with CDN

Source: https://advanced-cropper.github.io/vue-advanced-cropper/introduction/migration.html

When using a CDN, include the stylesheet link to import the cropper styles. This is necessary for the cropper to display correctly.

```html
<script src="https://unpkg.com/vue-advanced-cropper@^1.0.0/dist/index.umd.js" />
<!-- Add the following line to import the cropper styles -->
<link rel="stylesheet" href="https://unpkg.com/vue-advanced-cropper@^1.0.0/dist/style.css" />
```

--------------------------------

### Get Cropper Result Programmatically

Source: https://advanced-cropper.github.io/vue-advanced-cropper/components/cropper.html

Use the getResult method to retrieve cropper coordinates, image data, visible area, and canvas information without relying on the 'change' event.

```javascript
const {
	coordinates, image, visibleArea, canvas
} = this.$refs.cropper.getResult();

```

--------------------------------

### Import Bubble Theme CSS

Source: https://advanced-cropper.github.io/vue-advanced-cropper/guides/theming.html

Apply the bubble theme, characterized by its bright and light appearance. Import this CSS file to enable the bubble theme.

```css
import 'vue-advanced-cropper/dist/theme.bubble.css';
```

--------------------------------

### Basic Static Cropper Implementation

Source: https://advanced-cropper.github.io/vue-advanced-cropper/introduction/types.html

Implement a static cropper where the stencil is fixed. Users can only change the image size and position within the fixed stencil.

```html
<cropper
	:src="img"
	:stencil-props="{
		handlers: {},
		movable: false,
		resizable: false,
		aspectRatio: 1,
	}"
	:resize-image="{
		adjustStencil: false
	}"
	image-restriction="stencil"
/>

```

--------------------------------

### Get Cropped Result via getResult Method

Source: https://advanced-cropper.github.io/vue-advanced-cropper/guides/recipes.html

Retrieve the current stencil coordinates and cropped canvas by calling the `getResult` method on the cropper instance. This is an alternative to using the `change` event.

```javascript
import { Cropper } from 'vue-advanced-cropper';

export default {
	components: {
		Cropper,
	},
	data() {
		return {
			coordinates: {
				width: 0,
				height: 0,
				left: 0,
				top: 0,
			},
			image: null,
		};
	},
	methods: {
		crop() {
			const { coordinates, canvas, } = this.$refs.cropper.getResult();
			this.coordinates = coordinates;
			// You able to do different manipulations at a canvas
			// but there we just get a cropped image, that can be used 
			// as src for <img/> to preview result
			this.image = canvas.toDataURL();
		},
	},
};


```

--------------------------------

### Configure CORS for Cross-Origin Image Access

Source: https://advanced-cropper.github.io/vue-advanced-cropper/guides/cross-origin.html

To allow scripts to access the content of a cross-origin image, the 'Access-Control-Allow-Origin' header must be included in the image response headers. This example shows a common configuration.

```http
Access-Control-Allow-Origin: https://website-with-cropper.me

```

--------------------------------

### Basic Classic Cropper Implementation

Source: https://advanced-cropper.github.io/vue-advanced-cropper/introduction/types.html

This is the most basic configuration for a classic cropper. It allows for resizing and moving the stencil to select an area.

```html
<cropper :src="img" />

```

--------------------------------

### Get Cropped Result via Change Event

Source: https://advanced-cropper.github.io/vue-advanced-cropper/guides/recipes.html

Retrieve stencil coordinates and the cropped canvas by listening to the `change` event. This event fires on various interactions like image load, resize, and stencil movement.

```javascript
import { Cropper } from 'vue-advanced-cropper';

export default {
	components: {
		Cropper,
	},
	data() {
		return {
			coordinates: {
				width: 0,
				height: 0,
				left: 0,
				top: 0,
			},
			image: null,
		};
	},
	methods: {
		onChange({ coordinates, canvas, }) {
			this.coordinates = coordinates;
			// You able to do different manipulations at a canvas
			// but there we just get a cropped image, that can be used 
			// as src for <img/> to preview result
			this.image = canvas.toDataURL();
		},
	},
};


```

--------------------------------

### HTML Structure for Image Loading

Source: https://advanced-cropper.github.io/vue-advanced-cropper/guides/recipes.html

This HTML snippet sets up the user interface for loading an image. It includes a file input and a button to trigger the file selection, which then calls the loadImage method.

```html
<div id="app">
	<div class="upload-example">
		<cropper
			ref="cropper"
			class="upload-example-cropper"
			:src="image.src"
		/>
		<div class="button-wrapper">
			<button class="button" @click="$refs.file.click()">
				<input type="file" ref="file" @change="loadImage($event)" accept="image/*">
				Load image
			</button>
		</div>
	</div>
</div>

```

--------------------------------

### Classic Hybrid Cropper Implementation

Source: https://advanced-cropper.github.io/vue-advanced-cropper/introduction/types.html

Implement a classic hybrid cropper by enabling `auto-zoom`. The stencil automatically resizes and moves, attempting to maintain a default state.

```html
<cropper
	:src="img"
	:auto-zoom="true"
 />

```

--------------------------------

### priority

Source: https://advanced-cropper.github.io/vue-advanced-cropper/components/cropper.html

Sets the initialization priority between coordinates and visible area.

```APIDOC
## `priority`

### Description
Sets the initialization priority between coordinates and visible area.

### Type
`String`

### Default
`'coordinates'`

### Details
Rule of thumb
If you set the default coordinates it's better to set `'coordinates'`, if you set the default visible area it's better to set `'visible-area'`.
It can be either `'coordinates'` or `'visible-area'`. It sets the priority of initialization default values.
#### # `'coordinates'`
The coordinates will be initialized first, but `defaultSize` and `defaultPosition` algorithms will know nothing about visible area.
#### # `'visible-area'`
The visible area will be initialized first, but `defaultVisibleArea` algorithm will know nothing about coordinates.
```

--------------------------------

### Import ResizeEvent

Source: https://advanced-cropper.github.io/vue-advanced-cropper/events/resize-event.html

Import the ResizeEvent class from the vue-advanced-cropper library.

```javascript
import { ResizeEvent } from 'vue-advanced-cropper'
```

--------------------------------

### Customize Theme with SCSS Variables

Source: https://advanced-cropper.github.io/vue-advanced-cropper/guides/theming.html

When using the SCSS preprocessor, you can easily customize the theme by redefining available variables and importing the SCSS theme file. This allows for deep customization of the cropper's appearance.

```scss
$base-color: cornflowerblue;
@import '~vue-advanced-cropper/dist/theme.classic.scss';
```

--------------------------------

### Import Compact Theme CSS

Source: https://advanced-cropper.github.io/vue-advanced-cropper/guides/theming.html

Apply the compact theme, which is inspired by Android croppers and is well-suited for mobile devices. Import this CSS file after the base styles.

```css
import 'vue-advanced-cropper/dist/theme.compact.css';
```

--------------------------------

### Handle Cropper Events for Loading Indicator

Source: https://advanced-cropper.github.io/vue-advanced-cropper/guides/advanced-recipes.html

Utilize the `ready`, `change`, and `error` events to manage image loading states and display a visual indicator. The `ready` event fires on successful image load, `change` on stencil modification, and `error` on loading failure.

```html
<div>
	<input v-model="img.src">
	<div class="cropper-wrapper">
		<img v-if="img.loading" class="cropper-wrapper__loading" src="./indicator.svg">
		<cropper
			class="cropper"
			:src="img.src"
			@ready="ready"
			@error="error"
			@change="change"
		/>
	</div>
</div>

```

```javascript
import { Cropper } from 'vue-advanced-cropper';

export default {
	components: {
		Cropper,
	},
	data() {
		return {
			img: {
				src: 'https://images.pexels.com/photos/1055424/pexels-photo-1055424.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
				loading: false
			}
		};
	},
	watch: {
		'img.src'(value) {
			if (value) {
				this.img.loading = true;
			}
		}
	},
	methods: {
		change({ coordinates, canvas }) {
			console.log('Coordinates was changed', coordinates, canvas);
		},
		error() {
			console.log('There is error during image loading');
			this.img.loading = false;
		},
		ready() {
			console.log('Image is successfully loaded');
			this.img.loading = false;
		}
	},
};


```

--------------------------------

### Configuring Resize Image Options

Source: https://advanced-cropper.github.io/vue-advanced-cropper/components/cropper.html

The `resizeImage` prop can be an object to control image resizing behavior, including touch gestures, wheel sensitivity, and stencil adjustment.

```javascript
{
	touch: true,
	wheel: {
		ratio: 0.1
	},
	adjustStencil: true
}
```

--------------------------------

### Fixed Hybrid Cropper Implementation

Source: https://advanced-cropper.github.io/vue-advanced-cropper/introduction/types.html

Implement a fixed hybrid cropper with `auto-zoom` enabled, along with fixed stencil size and image restriction. User can change size and position, but it auto-zooms back.

```html
<cropper
	:src="img"
	:auto-zoom="true"
	:stencil-size="{
		width: 280,
		height: 280
	}"
	image-restriction="stencil"
 />

```

--------------------------------

### Import Cropper Styles with Bundler

Source: https://advanced-cropper.github.io/vue-advanced-cropper/introduction/migration.html

When using a bundler, import the cropper styles directly. This ensures styles are correctly applied to the cropper component.

```javascript
import { Cropper } from 'vue-advanced-cropper';
// Add the following line to import the cropper styles
import 'vue-advanced-cropper/dist/style.css';
```

--------------------------------

### Programmatically Manipulate Image with Cropper Methods

Source: https://advanced-cropper.github.io/vue-advanced-cropper/guides/advanced-recipes.html

Use the `zoom` and `move` methods on the cropper component's ref to programmatically adjust the image's scale and position. Ensure the cropper component has a ref assigned.

```javascript
import { Cropper } from 'vue-advanced-cropper';
import 'vue-advanced-cropper/dist/style.css'

export default {
	components: {
		Cropper,
	},
	methods: {
		zoom() {
			this.$refs.cropper.zoom(2);
		},
		move() {
			this.$refs.cropper.move(100, 100)
		}
	},
};
```

--------------------------------

### Style Preview Element

Source: https://advanced-cropper.github.io/vue-advanced-cropper/guides/customize-appearance.html

Define custom styles for the preview element by targeting the `.preview` class, such as setting a dashed border with specific color and opacity.

```css
.preview {
	border: dashed 1px rgba(255,255,255, 0.25);
}
```

--------------------------------

### refresh()

Source: https://advanced-cropper.github.io/vue-advanced-cropper/components/preview.html

Refreshes the preview. This method is called on every window resize and can be useful if you don't set width and height explicitly and you need to inform the preview that its size should be recalculated.

```APIDOC
## Methods

### `refresh()`

This method refreshes the preview. It is automatically called on window resize. Use this method if you need to manually trigger a recalculation of the preview's size, especially when width and height are not explicitly set.
```

--------------------------------

### Trigger Cropping with getResult Method

Source: https://advanced-cropper.github.io/vue-advanced-cropper/guides/recipes.html

A Vue template demonstrating how to use the `getResult` method. A button click triggers the `crop` method, which then calls `getResult` to obtain and display the cropped image.

```html
<div id="app">
	<cropper
		src="https://images.pexels.com/photos/580012/pexels-photo-580012.jpeg"
		ref="cropper"
	/>
	<button @click="crop">
		Crop
	</button>
</div>


```

--------------------------------

### Image Data Structure for Preview

Source: https://advanced-cropper.github.io/vue-advanced-cropper/components/preview.html

The `image` prop expects an object with details about the cropped image, including its source, dimensions, and transformations. Only the `src` field is mandatory.

```typescript
{
	src: string;
	width: number;
	height: number;
	transforms: {
		rotate: number;
		flip: {
			horizonal: boolean;
			vertical: boolean;
		};
	}
}

```

--------------------------------

### Import MoveEvent

Source: https://advanced-cropper.github.io/vue-advanced-cropper/events/move-event.html

Import the MoveEvent class from the vue-advanced-cropper library. This is necessary to create instances of the event.

```javascript
import {MoveEvent} from 'vue-advanced-cropper'
```

--------------------------------

### Default Lines Configuration

Source: https://advanced-cropper.github.io/vue-advanced-cropper/components/bounding-box.html

Determines which lines are visible by default in the bounding box component. All lines are visible by default.

```javascript
{
	north: true,
	west: true,
	south: true,
	east: true
}
```

--------------------------------

### Static Cropper with Fixed Stencil Size

Source: https://advanced-cropper.github.io/vue-advanced-cropper/introduction/types.html

Configure a static cropper with a fixed stencil size using the `stencil-size` prop. The aspect ratio is calculated from this size.

```html
<cropper
	:src="img"
	:stencil-props="{
		handlers: {},
		movable: false,
		resizable: false,
	}"
	:stencil-size="{
		width: 280,
		height: 280
	}"
	image-restriction="stencil"
/>

```

--------------------------------

### Vue 3 CDN Usage

Source: https://advanced-cropper.github.io/vue-advanced-cropper/introduction/getting-started.html

Include the cropper via CDN for Vue 3 projects. Access components through the global `VueAdvancedCropper` object.

```html
<script src="https://unpkg.com/vue-advanced-cropper@^2.0.0/dist/index.umd.js" />
<link rel="stylesheet" href="https://unpkg.com/vue-advanced-cropper@^2.0.0/dist/style.css" />

```

--------------------------------

### reset()

Source: https://advanced-cropper.github.io/vue-advanced-cropper/components/cropper.html

Resets the cropper to its initial state.

```APIDOC
## `reset()`

### Description

This method resets the cropper component to its default, initial state.

### Usage

```javascript
this.$refs.cropper.reset();
```
```

--------------------------------

### defaultBoundaries Configuration

Source: https://advanced-cropper.github.io/vue-advanced-cropper/components/cropper.html

Sets the default behavior for the cropper's boundaries. It can be a string ('fill' or 'fit') or a function to dynamically determine boundary dimensions.

```APIDOC
## `defaultBoundaries`

### Description
Sets the default behavior for the cropper's boundaries. It can be a string ('fill' or 'fit') or a function to dynamically determine boundary dimensions.

### Type
`String | Function`

### Default
`'fill'`

### Details
#### String
- `'fill'`: Boundaries will fill the cropper container.
- `'fit'`: Boundaries will match the image's aspect ratio and fit within the cropper.

#### Function
A function that accepts an object with `cropper` (DOM Element) and `imageSize`, and returns an object with `width` and `height` for the boundaries.
```javascript
({ cropper, imageSize  }) => {
	return {
		width: cropper.clientWidth,
		height: cropper.clientHeight,
	}
}
```
```

--------------------------------

### Default Position and Size with Objects

Source: https://advanced-cropper.github.io/vue-advanced-cropper/guides/advanced-recipes.html

Set the default position and size of the cropper directly using object literals. This provides a static configuration for the cropper's initial state.

```html
<cropper
	:src="https://images.unsplash.com/photo-1527199372136-dff50c10ea34?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"
	:default-position="{
		left: 100,
		top: 100
	}"
	:default-size="{
		width: 400,
		height: 400
	}"
/>


```

--------------------------------

### Setting Dynamic Stencil Size

Source: https://advanced-cropper.github.io/vue-advanced-cropper/components/cropper.html

Use the `stencilSize` prop with a function to dynamically set the stencil size based on the boundaries.

```javascript
({ boundaries }) => {
	return {
		width: boundaries.width - 100,
		height: boundaries.height - 100,
	}
}
```

--------------------------------

### sizeRestrictionsAlgorithm Configuration

Source: https://advanced-cropper.github.io/vue-advanced-cropper/components/cropper.html

Defines the algorithm for enforcing size restrictions on the cropper's stencil. This function customizes how min/max width and height are interpreted.

```APIDOC
## `sizeRestrictionsAlgorithm`

### Description
Defines the algorithm for enforcing size restrictions on the cropper's stencil. This function customizes how min/max width and height are interpreted.

### Type
`Function`

### Default
Pixels restrictions algorithm.

### Details
A static function that accepts an object containing `minWidth`, `minHeight`, `maxWidth`, `maxHeight`, and `imageSize`. It should return an object with the calculated restrictions for the stencil.
```javascript
({ minWidth, minHeight, maxWidth, maxHeight, imageSize }) => {
	return {
		maxWidth: imageSize.width * (maxWidth || 0) / 100,
		maxHeight: imageSize.height * (maxHeight || 0) / 100,
		minWidth: imageSize.width * (minWidth || 100) / 100,
		minHeight: imageSize.height * (minHeight || 100) / 100,
	}
}
```
_This example modifies `minWidth`, `minHeight`, `maxWidth`, and `maxHeight` to be interpreted as percentages of the image size._
```

--------------------------------

### Default Position and Size with Functions

Source: https://advanced-cropper.github.io/vue-advanced-cropper/guides/advanced-recipes.html

Configure the default position and size of the cropper using JavaScript functions. This is useful for automatically detecting elements like user faces.

```javascript
import { Cropper } from 'vue-advanced-cropper';

export default {
	components: {
		Cropper,
	},
	methods: {
		defaultPosition() {
			return {
				left: 100,
				top: 100,
			};
		},
		defaultSize() {
			return {
				width: 400,
				height: 400,
			};
		}
	}
};


```

```html
<cropper
	:src="https://images.unsplash.com/photo-1527199372136-dff50c10ea34?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"
	:default-position="defaultPosition"
	:default-size="defaultSize"
/>


```

--------------------------------

### minWidth

Source: https://advanced-cropper.github.io/vue-advanced-cropper/components/cropper.html

Sets the minimum width constraint for the cropped area in pixels.

```APIDOC
## `minWidth`

### Description
Sets the minimum width constraint for the cropped area in pixels.

### Type
`Number`

### Details
The minimum width of the cropped coordinates in pixels
```

--------------------------------

### Custom Size Restrictions with Percents

Source: https://advanced-cropper.github.io/vue-advanced-cropper/guides/advanced-recipes.html

Redefine the `sizeRestrictionsAlgorithm` prop to implement custom size restrictions, such as minimum and maximum dimensions defined in percentages rather than pixels.

```javascript
import { Cropper } from 'vue-advanced-cropper';

export default {
	components: {
		Cropper,
	},
	methods: {
		percentsRestriction({ minWidth, minHeight, maxWidth, maxHeight, imageWidth, imageHeight }) {
			return {
				minWidth: minWidth,
				minHeight: minHeight,
				maxWidth: maxWidth,
				maxHeight: maxHeight,
			};
		}
	}
};

```

```html
<cropper
	:src="image"
	:min-height="400"
	:min-width="400"
	:size-restrictions-algorithm="pixelsRestriction"
/>

```

--------------------------------

### move(left, top)

Source: https://advanced-cropper.github.io/vue-advanced-cropper/components/cropper.html

Translates the visible area by specified horizontal and vertical distances.

```APIDOC
## `move(left, top)`

### Description

This method translates the visible area of the cropper relative to its current position. The `left` and `top` parameters define the relative shift along the horizontal and vertical axes, respectively.

### Arguments

- **`left`** (Number) - The relative shift along the horizontal axis.
- **`top`** (Number) - The relative shift along the vertical axis.

### Usage

```javascript
// Move the visible area 10 pixels to the right and 5 pixels down
this.$refs.cropper.move(10, 5);
```
```

--------------------------------

### Rotate and Flip Image Methods

Source: https://advanced-cropper.github.io/vue-advanced-cropper/guides/advanced-recipes.html

Use the `rotate` and `flip` methods to manipulate image orientation. The `rotate` method accepts an angle in degrees (multiples of 90 are recommended), and the `flip` method accepts two boolean arguments for horizontal and vertical flipping.

```javascript
import { Cropper } from 'vue-advanced-cropper';
import 'vue-advanced-cropper/dist/style.css'

export default {
	components: {
		Cropper,
	},
	methods: {
		flip(x,y) {
			this.$refs.cropper.flip(x,y);
		},
		rotate(angle) {
			this.$refs.cropper.rotate(angle);
		},
	},
};
```

```html
<cropper
	ref="cropper"
	:src="image"
/>
```

--------------------------------

### defaultVisibleArea Configuration

Source: https://advanced-cropper.github.io/vue-advanced-cropper/components/cropper.html

Configures the initial visible area of the cropper. It can be set as a fixed object with dimensions and position, or as a function that dynamically calculates these values based on cropper state.

```APIDOC
## `defaultVisibleArea`

### Description
Configures the initial visible area of the cropper. It can be set as a fixed object with dimensions and position, or as a function that dynamically calculates these values based on cropper state.

### Type
`Object | Function`

### Details
#### Object
Defines a static visible area with `width`, `height`, `left`, and `top` properties. The cropper will maintain the aspect ratio, potentially resizing the visible area.
```json
{
	"width": 200,
	"height": 200,
	"left": 0,
	"top": 0
}
```

#### Function
A function that accepts an object with `coordinates`, `boundaries`, and `imageSize`, and returns an object defining the visible area's coordinates and dimensions.
```javascript
({ coordinates, boundaries, imageSize }) => {
	return {
		left: coordinates.left - 50,
		top: coordinates.top - 50,
		width: coordinates.width + 100,
		height: coordinates.height + 100,
	}
}
```
```

--------------------------------

### minHeight

Source: https://advanced-cropper.github.io/vue-advanced-cropper/components/cropper.html

Sets the minimum height constraint for the cropped area in pixels.

```APIDOC
## `minHeight`

### Description
Sets the minimum height constraint for the cropped area in pixels.

### Type
`Number`

### Details
The minimum height of the cropped coordinates in pixels
```

--------------------------------

### Default moveImage object configuration

Source: https://advanced-cropper.github.io/vue-advanced-cropper/components/cropper.html

Defines the default object for configuring image movement via touch and mouse.

```javascript
{
	touch: true,
	mouse: true
}
```

--------------------------------

### Configuring Canvas Options

Source: https://advanced-cropper.github.io/vue-advanced-cropper/components/cropper.html

The `canvas` prop can be an object to configure canvas properties like dimensions, smoothing, and fill color.

```javascript
{
	width: 100,
	height: 100,
	minWidth: 0,
	minHeight: 0,
	maxWidth: Infinity,
	maxHeight: Infinity,
	maxArea: Infinity,
	imageSmoothingEnabled: true,
	imageSmoothingQuality: 'high',
	fillColor: 'transparent'
}
```

--------------------------------

### Vue 2 CDN Usage

Source: https://advanced-cropper.github.io/vue-advanced-cropper/introduction/getting-started.html

Include the cropper via CDN for Vue 2 projects. Use the specified version links and access global components like 'cropper', 'circle-stencil', etc.

```html
<script src="https://unpkg.com/vue-advanced-cropper@^1.0.0/dist/index.umd.js" />
<link rel="stylesheet" href="https://unpkg.com/vue-advanced-cropper@^1.0.0/dist/style.css" />

```

--------------------------------

### transitions

Source: https://advanced-cropper.github.io/vue-advanced-cropper/components/cropper.html

Enables or disables transitions for various image manipulation actions like zoom, rotate, and flip.

```APIDOC
## `transitions`

### Description
Enables or disables transitions for various image manipulation actions like zoom, rotate, and flip.

### Type
`Boolean`

### Default
`true`

### Details
This flag indicates if transitions should be enabled. The transitions are used during auto-zoom, rotate image, flip image, using `zoom` and `move` methods.
```

--------------------------------

### Specify Stencil Component by Name

Source: https://advanced-cropper.github.io/vue-advanced-cropper/guides/recipes.html

Use the 'stencil-component' prop to specify a globally registered stencil component by its name.

```html
<cropper
	stencil-component="circle-stencil"
/>

```