Vue Cropper

Vue cropper is a Vue.js component that wraps the popular JavaScript image cropping library Cropper.js. It is a flexible and customizable tool that allows users to crop images directly on the client side.

Installation

You can install Vue cropper via npm:

npm install vue-cropperjs --save

Usage

Once installed, import the Vue cropper component and add it to your Vue component:

<template>
  <vue-cropper
    ref="cropper"
    :src="imageSrc"
    :guides="false"
    :crop="onCrop"
  ></vue-cropper>
</template>

<script>
import VueCropper from 'vue-cropperjs';

export default {
  components: {
    VueCropper,
  },
  data() {
    return {
      imageSrc: 'path/to/image',
    };
  },
  methods: {
    onCrop(croppedImage) {
      // do something with the cropped image
    },
  },
};
</script>

In the above example, we set the image source to "path/to/image", turn off the cropping guides, and provide a callback function to handle the cropped image.

Props

• src (String, required): The image source URL.
• alt (String, optional): The image alt text.
• aspectRatio (Number, optional): The aspect ratio of the crop box. Defaults to 0 (free aspect ratio).
• autoCropArea (Number or Float, optional): The default size of the crop box. Defaults to 0.8 (80% of the image size).
• viewMode (Number, optional): The crop box view mode. Can be 0, 1, 2, 3 or 4. Defaults to 0 (none).
• dragMode (String, optional): The crop box drag mode. Can be crop, move or none. Defaults to crop.
• toggleDragModeOnDblclick (Boolean, optional): Whether to toggle drag mode when double-clicking the crop box. Defaults to true.
• modal (Boolean, optional): Whether to show a modal overlay around the crop box. Defaults to true.
• guides (Boolean, optional): Whether to show the crop guides. Defaults to true.
• center (Boolean, optional): Whether to center the crop box. Defaults to false.
• highlight (Boolean, optional): Whether to highlight the crop box. Defaults to true.
• background (Boolean, optional): Whether to show the image background. Defaults to true.
• autoCrop (Boolean, optional): Whether to automatically crop the image when initialized. Defaults to false.
• movable (Boolean, optional): Whether to allow the image to be moved. Defaults to true.
• rotatable (Boolean, optional): Whether to allow the image to be rotated. Defaults to true.
• scalable (Boolean, optional): Whether to allow the image to be scaled. Defaults to true.
• zoomable (Boolean, optional): Whether to allow the image to be zoomed. Defaults to true.
• zoomOnTouch (Boolean, optional): Whether to allow zooming on touch screen devices. Defaults to true.
• zoomOnWheel (Boolean, optional): Whether to allow zooming with the mouse wheel. Defaults to true.
• wheelZoomRatio (Number, optional): The zoom ratio when using the mouse wheel. Defaults to 0.1.
• crop (Function, optional): The callback function to handle the cropped image.

Methods

• setImage(url): Sets the image source to url.
• setAspectRatio(ratio): Sets the aspect ratio to ratio.
• setDragMode(mode): Sets the drag mode to mode.
• getCroppedCanvas(options): Returns a canvas object of the cropped image. The options parameter accepts an object with the following properties:
  • width (Number, optional): The output width of the canvas.
  • height (Number, optional): The output height of the canvas.
  • minWidth (Number, optional): The minimum width of the canvas.
  • minHeight (Number, optional): The minimum height of the canvas.
  • maxWidth (Number, optional): The maximum width of the canvas.
  • maxHeight (Number, optional): The maximum height of the canvas.
  • fillColor (String, optional): The background color of the canvas when the aspect ratio is not met.
• destroy(): Destroys the cropper instance.

Events

• cropstart: Triggered when the crop box starts to move or resize.
• cropmove: Triggered when the crop box is being moved or resized.
• cropend: Triggered when the crop box stops moving or resizing.

Conclusion

Vue cropper is a powerful and versatile image cropping tool for Vue.js developers. With its many options and callbacks, it allows developers to create custom image cropping solutions tailored to their needs, making it a valuable addition to any Vue.js project.