vue-cropper | vue图片剪裁组件

要使用vue-cropper这个插件，您需要遵循以下步骤：

• 下载vue-cropper的代码库，并将其添加到您的项目中。
• 在您的Vue.js组件中，引入vue-cropper并在模板中使用。
• 通过props属性传递图片的URL给vue-cropper组件。
• 通过监听vue-cropper的事件来获取裁剪后的图片。

使用方法

安装

如果您想使用vue-cropper图片裁剪插件，首先您需要安装它，命令如下：

// npm 安装
npm install vue-cropper
// yarn 安装
yarn add vue-cropper
		

使用

Vue3 全局引入

import VueCropper from 'vue-cropper'; 
import 'vue-cropper/dist/index.css'

const app = createApp(App)
app.use(VueCropper)
app.mount('#app')
		

Vue 3 组件内引入

npm install vue-cropper@next
import 'vue-cropper/dist/index.css'
import { VueCropper }  from "vue-cropper";
		

Vue2 全局引入

import VueCropper from 'vue-cropper'
Vue.use(VueCropper)
		

Vue2 组件内引入

import { VueCropper }  from 'vue-cropper' 
components: {
  VueCropper
}
		

示例代码

<template>
  <div>
    <vue-cropper
      ref="cropper"
      :img="imgUrl"
      :size="size"
      :outputSize="outputSize"
      :canScale="canScale"
      :autoCrop="autoCrop"
      :autoCropWidth="autoCropWidth"
      :autoCropHeight="autoCropHeight"
      :fixed="fixed"
      :fixedNumber="fixedNumber"
      @cropend="cropend"
    />
    <button @click="cropImage">裁剪图片</button>
  </div>
</template>

// js
import VueCropper from 'vue-cropper'

export default {
  components: { VueCropper },
  data() {
    return {
      imgUrl: '/path/to/image.jpg',
      size: {
        width: 200,
        height: 200
      },
      outputSize: {
        width: 1000,
        height: 1000
      },
      canScale: true,
      autoCrop: true,
      autoCropWidth: 160,
      autoCropHeight: 90,
      fixed: false,
      fixedNumber: [1, 1]
    }
  },
  methods: {
    cropImage() {
      this.$refs.cropper.getCropData(data => {
      	console.log(data)
      })
    },
    cropend(dataUrl) {
      console.log(dataUrl)
    }
  }
}			
		

其中，imgUrl为需要裁剪的图片的URL地址，outputSize为裁剪后输出的图片大小，cropImage是自定义的裁剪方法，用于获取裁剪后的图片数据。

配置参数

github网址：https://github.com/xyxiao001/vue-cropper