NbImageCropper allows users to select and crop an image with precision. It supports circular and rectangular crops, aspect ratio locking, and a real-time preview of the cropped output.
TIP
The component automatically handles image scaling and positioning to fit within the display area while maintaining the original aspect ratio.
<template>
<NbImageCropper :image="selectedImage" @crop="handleCrop" />
<input
type="file"
ref="fileInput"
accept="image/*"
style="display: none"
@change="onFileChange"
/>
<NbButton @click="() => fileInput.click()">Open File</NbButton>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const fileInput = ref<HTMLInputElement | null>(null)
const selectedImage = ref<File | null>(null)
const onFileChange = (event: Event) => {
const input = event.target as HTMLInputElement
if (input.files?.[0]) selectedImage.value = input.files[0]
}
const handleCrop = (data: {
blob: Blob
geometry: { x: number; y: number; width: number; height: number }
}) => {
const formData = new FormData()
formData.append('file', data.blob, 'cropped.png')
formData.append('geometry', JSON.stringify(data.geometry))
}
</script>Circle crop
When cropAsCircle is enabled, the crop area is displayed as a circle overlay.
Locked aspect ratio
When lockAspectRatio is enabled, the crop area maintains its proportions during resizing. Combined with cropAsCircle, this creates a perfect circle.
With live preview
Enable showPreview to display a real-time preview of the cropped area and its geometry data.
Circular output
When outputAsCircle is enabled, the final cropped image has transparent corners, producing a circular PNG.