vue 如何使用vue-cropper裁剪图片你知道吗

下面是关于如何使用vue-cropper裁剪图片的完整攻略。

什么是vue-cropper

vue-cropper是基于vue.js的图片裁剪组件，使用官方的cropper.js库，功能强大，易于使用。

安装vue-cropper

安装vue-cropper的方法有两种：

使用npm安装：

npm install vue-cropper --save

使用CDN：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>vue-cropper demo</title>
  <link rel="stylesheet" href="https://unpkg.com/cropperjs/dist/cropper.css">
</head>
<body>
  <div id="app">
    <vue-cropper :img="img" :outputSize="outputSize" :outputType="outputType" @getCropData="getCropData"></vue-cropper>
  </div>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
  <script src="https://unpkg.com/cropperjs/dist/cropper.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue-cropper"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        img: 'https://avatars.githubusercontent.com/u/6744020?v=4',
        outputSize: { width: 100, height: 100 },
        outputType: 'jpeg',
        cropData: ''
      },
      methods: {
        getCropData (data) {
          this.cropData = data
        }
      }
    })
  </script>
</body>
</html>

使用vue-cropper裁剪图片

使用vue-cropper裁剪图片分为两步：

在template中使用vue-cropper组件

<template>
  <vue-cropper :img="img" :outputSize="outputSize" :outputType="outputType" @getCropData="getCropData"></vue-cropper>
</template>

在script中设置相关参数和事件

<script>
import VueCropper from 'vue-cropper'

export default {
  components: { VueCropper },
  data () {
    return {
      img: '', // 要裁剪的图片地址
      outputSize: { // 裁剪后输出的尺寸
        width: 100,
        height: 100
      },
      outputType: 'jpeg', // 裁剪后输出的格式，可选值为jpeg、png、webp
      cropData: '' // 裁剪后输出的图片base64字符串
    }
  },
  methods: {
    getCropData (data) { // 获取裁剪后图片的base64字符串
      this.cropData = data
    }
  }
}
</script>

示例一

下面是一个完整的使用vue-cropper裁剪图片的示例：

<template>
  <div class="container">
    <vue-cropper :img="img" :outputSize="outputSize" :outputType="outputType" @getCropData="getCropData"></vue-cropper>
    <img :src="cropData" v-if="cropData">
  </div>
</template>

<script>
import VueCropper from 'vue-cropper'

export default {
  components: { VueCropper },
  data () {
    return {
      img: 'https://avatars.githubusercontent.com/u/6744020?v=4',
      outputSize: {
        width: 100,
        height: 100
      },
      outputType: 'jpeg',
      cropData: ''
    }
  },
  methods: {
    getCropData (data) {
      this.cropData = data
    }
  }
}
</script>

在这个示例中，我们首先引入了vue-cropper组件，然后在template中使用了该组件，并设置了相应的参数。在script中，我们定义了img、outputSize、outputType和cropData变量，img是要裁剪的图片地址，outputSize是裁剪后输出的尺寸，outputType是裁剪后输出的格式，cropData是裁剪后输出的图片base64字符串。还定义了一个getCropData事件来获取裁剪后图片的base64字符串。

示例二

下面是另一个使用vue-cropper裁剪图片的示例：

<template>
  <div class="container">
    <div class="preview">
      <img :src="img" :style="{ width: previewWidth }">
    </div>
    <vue-cropper ref="cropper" :img="img" :outputSize="outputSize" :outputType="outputType" @getCropData="getCropData"></vue-cropper>
    <button class="btn" @click="crop">裁剪</button>
    <img :src="cropData" v-if="cropData">
  </div>
</template>

<script>
import VueCropper from 'vue-cropper'

export default {
  components: { VueCropper },
  data () {
    return {
      img: 'https://avatars.githubusercontent.com/u/6744020?v=4',
      outputSize: {
        width: 100,
        height: 100
      },
      outputType: 'jpeg',
      cropData: '',
      previewWidth: '50%'
    }
  },
  methods: {
    getCropData (data) {
      this.cropData = data
    },
    crop () {
      const cropper = this.$refs.cropper.getCropper()
      const dataURL = cropper.getCroppedCanvas().toDataURL(this.outputType)
      this.cropData = dataURL
    }
  }
}
</script>

在这个示例中，与第一个示例相比，我们增加了一个裁剪按钮和一个预览区域，并且在裁剪按钮的click事件中调用了getCroppedCanvas()方法来获取裁剪后的canvas对象，并使用toDataURL()方法将其转换为base64字符串。

总结

以上是关于如何使用vue-cropper裁剪图片的完整攻略，使用vue-cropper只需以下几步：

安装vue-croppe组件
在template中使用vue-cropper组件，并设置相关参数
在script中设置相应的变量和方法

另外，要注意vue-cropper在IE浏览器中可能存在一些兼容性问题。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：vue 如何使用vue-cropper裁剪图片你知道吗 - Python技术站

vue 如何使用vue-cropper裁剪图片你知道吗

什么是vue-cropper

安装vue-cropper

使用vue-cropper裁剪图片

示例一

示例二

总结

相关文章