Basic Cropper API Reference

Props

Prop	Type	Default	Required	Description
initImage	String	''	Yes	Initial image source (URL or base64)
cropImageNv	Boolean	false	No	When set to true, triggers cropping and emits cropped image
width	Number	800	No	Width of the crop area in pixels
height	Number	600	No	Height of the crop area in pixels
fullSizeCropper	Boolean	false	No	If true, crop area uses full image dimensions

Events

Event	Payload	Description
image:cropped	base64Image: string	Emitted when image is cropped, returns base64 data URL

Methods (Exposed via Template Ref)

Method	Returns	Description
getCroppedImage	string (base64)	Returns the cropped image as base64 data URL

Dependencies

• vue-advanced-cropper: External library for advanced cropping functionality
• useCropper composable: Internal composable for cropper state management
• StencilCustom component: Custom stencil component for the crop area

Example Usage

<template>
  <BasicCropper
    ref="cropperRef"
    :init-image="imageUrl"
    :crop-image-nv="shouldCrop"
    :width="400"
    :height="400"
    :full-size-cropper="false"
    @image:cropped="handleImageCropped"
  />
</template>

<script setup>
import { ref } from 'vue';
import BasicCropper from '@/components/BasicCropper.vue';

const imageUrl = ref('https://example.com/image.jpg');
const shouldCrop = ref(false);
const cropperRef = ref(null);

const handleImageCropped = (base64Image) => {
  console.log('Cropped image:', base64Image);
  // Use the base64 image
};

const cropImage = () => {
  shouldCrop.value = true;
};

// Or use the exposed method
const getCroppedImage = () => {
  if (cropperRef.value) {
    const base64Image = cropperRef.value.getCroppedImage();
    console.log('Cropped image:', base64Image);
  }
};
</script>

Cropping Modes

Custom Dimensions Mode (default)

When fullSizeCropper is false, the component uses the width and height props to set the crop area size. The crop area is centered on the image.

<BasicCropper
  :init-image="imageUrl"
  :width="400"
  :height="400"
  :full-size-cropper="false"
/>

Full Size Mode

When fullSizeCropper is true, the crop area automatically uses the full image dimensions.

<BasicCropper
  :init-image="imageUrl"
  :full-size-cropper="true"
/>

Cropping Workflow

1. Set Image: Provide an image via initImage prop
2. Adjust Crop Area: User can click on image to reposition, resize, or zoom
3. Trigger Crop: Set cropImageNv to true to trigger cropping
4. Receive Result: Component emits image:cropped event with base64 data URL
5. Reset: Set cropImageNv back to false for next crop

Styling

The component uses the following CSS classes:

• .basic-cropper-wrapper: The main container
• .cropper-container: The cropper container with transition effects
• .cropper-container.hide: Applied during initialization (blur effect)

Global styles for vue-advanced-cropper:

• .vue-advanced-cropper__foreground: Crop area foreground
• .vue-advanced-cropper__image: The image element
• .vue-advanced-cropper__image-wrapper: Image wrapper
• .vue-advanced-cropper__background: Background overlay

Notes

• The component uses vue-advanced-cropper library internally
• Custom stencil component (StencilCustom) is used for the crop area
• Initialization takes ~500ms to properly set up the stencil
• Click-to-position only works when stencil hasn't been manually modified
• The component provides cropperData via Vue's provide/inject for child components
• Base64 output format is data:image/png;base64,...