在 vue3 中使用 crpperjs 做头像裁剪

1. 安装

npm install cropperjs

2. 引入

import 'cropperjs/dist/cropper.css';
import Cropper from 'cropperjs';

3. 裁剪

 

4. 完整组件  App.vue

<template>
  <div>
    <img ref="imgRef" src="./assets/ss.jpg" />
    <button @click="cut">裁剪</button>

    <div v-if="state.src">
      <img style="width:200px;height:200px" :src="state.src" alt="">
    </div>
  </div>
</template>

<script setup>
import 'cropperjs/dist/cropper.css';
import Cropper from 'cropperjs';
import { ref, nextTick, reactive } from 'vue'

const state = reactive({
  src: ''
})

const imgRef = ref()
let cropper = null
function init() {
  cropper = new Cropper(imgRef.value, {
    // 是否显示虚拟网格线
    guides: true,
    // 不允许超出图片边界
    viewMode: 1,
    // 裁剪图片的宽高比例
    aspectRatio: 1 / 1,

  });
}

function cut() {
  const data = cropper.getCroppedCanvas()
  state.src = data.toDataURL()
}
nextTick(() => {
  init()
})
</script>

<style lang='scss' scoped>
img {
  width: 600px;
  height: 600px;
}
</style>