Skip to content
On this page

Cropper

Preview and crop image

Usage

Simple Usage

cropper-preview
preview
vue
<template>
  <p-cropper src="./assets/sample-1.jpg" />
</template>

Crop Size

You can adjust crop size using width, height or ratio.

Using width and height

cropper-preview
preview
vue
<template>
  <p-cropper src="./assets/sample-1.jpg" width="500" height="200" />
</template>

Using Ratio

cropper-preview
preview
vue
<template>
  <p-cropper src="./assets/sample-1.jpg" :ratio="16/9" />
</template>

Rounded Crop

Add prop rounded to enable circular cropping.

cropper-preview
preview
vue
<template>
  <p-cropper src="./assets/sample-1.jpg" rounded />
</template>

Viewer Mode

If you want to use this component for previewing image only, you can add prop no-crop to disabled cropping.

cropper-preview
preview
vue
<template>
  <p-cropper src="./assets/sample-1.jpg" no-crop />
</template>

Binding v-model

You can bind the result of cropped image using v-model.

cropper-preview
preview
vue
<template>
  <p-cropper src="./assets/sample-1.jpg" v-model="result" />
</template>

result:

Encode to base64

You can add modifier base64 to your v-model, it's enforce result to base64-dataURI.

cropper-preview
preview
vue
<template>
  <p-cropper src="./assets/sample-1.jpg" v-model.base64="result" />
</template>

result:

Result Image

Disabling Autocrop

By default, cropping process was ran every movement (drag, zoom, & rotate). It can be exhausting the resource on some device. You can disabled it using prop no-autocrop. And to trigger the cropping, you can use templateRef on <p-cropper> component, and call .crop() function.

cropper-preview
preview

result:

Result Image
vue
<template>
  <p-cropper
    ref="cropper"
    v-model.base64="result2"
    src="./assets/sample-1.jpg"
    no-autocrop />
  <p-button @click="doCrop">Do Crop</p-button>
</template>

<script setup>
  import { templateRef } from '@vueuse/core'

  const cropper = templateRef('cropper')

  function doCrop () {
    if (cropper.value)
      cropper.value.crop()
  }
</script>

API

Props

PropsTypeDefaultDescription
srcString, File-Image source
widthNumber-Crop width, in pixel
heightNumber-Crop height, in pixel
ratioNumber1/1Crop ratio
img-widthNumber-Add attribute width on img tag
img-heightNumber-Add attribute height on img tag
img-classString-Additional class to img tag
roundedBooleanfalseEnabling rounded crop
no-cropBooleanfalseDisabling crop mode
no-autocropBooleanfalseDisabling autocrop
modelValueFile-v-model value binding

Slots

NameDescription
controlContent for placing additional control

Events

NameArgumentsDescription
load-Event when image finished loaded
result-Event when cropped done

See Also

Released under the MIT License.