Quick Start #

Please note that it can only be used in Vue 3 projects, and the Vue version number is at least =3.2.13 . Vue 2 is not supported.

Installation #

With npm ：

npm install vue-picture-cropper

With yarn ：

yarn add vue-picture-cropper

With pnpm ：

pnpm add vue-picture-cropper

Import on demand #

Import on demand in Vue components, the template and instance are only used within components.

import VuePictureCropper, { cropper } from 'vue-picture-cropper'

Imported module description:

Usage #

Here is a code snippet introduction for basic usage. For complete usage, please refer to the online demo example, which provides function demo and source code reference.

With JavaScript #

In standard component:

<script>
import VuePictureCropper, { cropper } from 'vue-picture-cropper'

export default {
  components: {
    VuePictureCropper,
  },
  // ...
}
</script>

In script-setup syntactic sugar:

<script setup>
import VuePictureCropper, { cropper } from 'vue-picture-cropper'
</script>

With TypeScript #

In standard component:

<script lang="ts">
import { defineComponent } from 'vue'
import VuePictureCropper, { cropper } from 'vue-picture-cropper'

export default defineComponent({
  components: {
    VuePictureCropper,
  },
  // ...
})
</script>

In script-setup syntactic sugar:

<script setup lang="ts">
import VuePictureCropper, { cropper } from 'vue-picture-cropper'
</script>

Rendering #

The imported VuePictureCropper is a component, which can be used as a subcomponent.

<template>
  <VuePictureCropper
    :boxStyle="{
      width: '100%',
      height: '100%',
      backgroundColor: '#f8f8f8',
      margin: 'auto',
    }"
    :img="pic"
    :options="{
      viewMode: 1,
      dragMode: 'crop',
      aspectRatio: 16 / 9,
    }"
    @ready="ready"
  />
</template>

For file selection and cropping results, please obtain them through <input type="file" > and the cropper instance API, and refer to the example source code of live demos.

• With Composition API (suitable for developers familiar with the Vue 3 syntaxes)
• With Options API (suitable for developers accustomed to Vue 2 syntaxes)

Multiple Cropper #

Since 0.5.0 version, multiple cropper can be used in the same page without additional configuration. You can experience it in Multiple Cropper demo and refer to the demo source code.

License #

MIT License © 2020 chengpeiquan