@sakhnovkrg/vue-avatar-cropper

Vue Avatar Cropper

A lightweight, feature-rich image cropping component for Vue 3 with intuitive pan, zoom, and crop functionality.

Demo

Live Demo

Features

• ✨ Intuitive drag-to-pan interface
• 🔍 Pinch-to-zoom and mouse wheel zoom support
• 📱 Mobile-friendly with multi-touch gestures
• 👁️ Optional grid overlay and circle mask
• 🖼️ Configurable output size
• 🚀 Easy to use with programmatic API
• 🔧 Full TypeScript support
• ⚡ Lightweight with no dependencies

Installation

npm install @sakhnovkrg/vue-avatar-cropper

Basic Usage

<script setup lang="ts">
import { ref } from 'vue'
import AvatarCropper from '@sakhnovkrg/vue-avatar-cropper'

const cropperRef = ref<InstanceType<typeof AvatarCropper>>()

const handleFileSelect = (event: Event) => {
  const target = event.target as HTMLInputElement
  const file = target.files?.[0]
  if (file && cropperRef.value) {
    cropperRef.value.loadImage(file)
  }
}

const handleCropped = (base64: string) => {
  console.log('Cropped image:', base64)
  // Use the base64 image as needed
}
</script>

<template>
  <div>
    <input type="file" accept="image/*" @change="handleFileSelect" />

    <AvatarCropper
      ref="cropperRef"
      :output-size="512"
      :show-grid="true"
      :show-circle="false"
      background-color="#ffffff"
      @cropped="handleCropped"
    />

    <button @click="cropperRef?.cropImage()">Crop Image</button>
  </div>
</template>

Props

Events

Methods (via ref)

Access these methods through the component reference: