Vue CroppaImage cropping that feels native to Vue.

A small, touch-friendly cropper for profile photos, uploads, previews, and simple image workflows.

Get started

Live Vue 3 preview

GitHub

Direct manipulation

Drag to reposition, scroll or pinch to zoom, rotate, flip, and constrain the image inside the crop.

Real canvas output

Export a data URL or Blob, or access the canvas and drawing context directly.

Mobile friendly

File input, drag and drop, mouse, touch, pinch, and responsive sizing are built into the component.

Persistable state

Read and apply crop metadata to restore a user crop later or synchronize a passive preview.

Try the real Vue 3 component

The live preview mounts the Vue 3 component from this repository. Choose an image, drag and zoom it inside the fixed viewport, rotate or flip it, and export the visible pixels.

Small API, useful escape hatches

Vue Croppa exposes movement, zoom, rotation, output, metadata, and direct canvas methods through a component ref.

vue

<script setup>
import { ref } from 'vue'
import { Croppa } from 'vue-croppa'
import 'vue-croppa/style.css'

const cropper = ref(null)
async function save() {
  const blob = await cropper.value?.promisedBlob('image/jpeg', 0.9)
  // Upload or download blob here.
}
</script>

<template>
  <Croppa ref="cropper" :width="400" :height="300" prevent-white-space />
  <button @click="save">Save crop</button>
</template>

Versions: Vue 3 uses the v2 guide. Vue 2 applications can keep vue-croppa@1 and use the v1 guide, v1 examples, and migration guide.