Image Cropping Made Easy – Vue-picture-cropper

Vue-picture-cropper is a simple image-cropping component for Vue 3 applications. Based on the Cropper.js JavaScript library, a feature-rich image cropping plugin written in pure JavaScript.

It allows you to set custom aspect ratios, adjust crop box dimensions, and even enable responsive cropping for mobile devices. Additionally, users can zoom in and out, move the crop box freely, and preview their changes in real-time.

How to use it:

1. Install and import the Vue-picture-cropper.

import VuePictureCropper, { cropper } from 'vue-picture-cropper'
export default {
  components: {
    VuePictureCropper,
  },
  // ...
}

2. Add the VuePictureCropper component to the template.

<template>
  <VuePictureCropper
    :boxStyle="{
      CSS Styles Here
    }"
    :img="pic"
    :options="{
      Cropper.js options here
    }"
    @ready="ready"
  />
</template>

3. Available component props.

/**
 * The source of the image to be cropped
 * @description The value of the `src` attribute of `<img src="" />`
 */
img: {
  type: String,
  required: true,
  default: '',
},
/**
 * Style Sheet for Crop Box
 */
boxStyle: {
  type: Object,
  required: false,
  default: () => ({}),
},
/**
 * Options for cropperjs
 * @see https://github.com/fengyuanchen/cropperjs#options
 */
options: {
  type: Object,
  required: false,
  default: () => ({}),
},
/**
 * Some preset modes provided by this plugin
 */
presetMode: {
  type: Object as PropType < PresetModeOptions > ,
  required: false,
  default: () => ({}),
},

4. Available API methods.

/**
 * Get the cropped Base64 result
 * @description can be used for local preview display
 */
getDataURL: (options?: Record<string, any>) => string
/**
 * Get the cropped blob result
 * @description can be used to pass to the server
 */
getBlob: (options?: Record<string, any>) => Promise<Blob | null>
/**
 * Get the cropped file result
 * @description can be used to pass to the server
 * @since 0.2.0
 */
getFile: (options?: Record<string, any>) => Promise<File | null>

Preview:

Vue-picture-cropper

Download Details:

Author: chengpeiquan

Live Demo: https://cropper.chengpeiquan.com/with-composition-api.html

Download Link: https://github.com/chengpeiquan/vue-picture-cropper/archive/refs/heads/main.zip

Official Website: https://github.com/chengpeiquan/vue-picture-cropper

Install & Download:

# Yarn
$ yarn add vue-picture-cropper

# NPM
$ npm install vue-picture-cropper

Add Comment