Vue3+Ts+vue-cropper:实现头像图片裁剪

目录

前言

效果：

如何使用：

导入vue-cropper

在组件或页面中引用(简单的使用)

 配置项详解

props

方法 

 基本的功能实现

实时预览

其他基础功能

示例组件代码

---

前言

本文主要介绍如何基于VUE+TS，通过vue-cropper实现头像图片剪裁的基本功能，包含拖拽效果、放大、缩小、旋转、更换图片。上传部分请根据自身要求进行代码编写

效果

如何使用

导入vue-cropper

   npm依赖地址：https://www.npmjs.com/package/vue-cropper

npm i vue-cropper@next 

在组件或页面中引用(简单的使用)

 配置项详解

props

我在示例中配置了所有配置项，友子们可以根据自己的需求进行配置和修改

方法 

• @realTime 实时预览事件
• @imgLoad 图片加载的回调, 返回结果 success, error

 基本的功能实现

实时预览

预览的功能，我们可以通过VueCropper的realTime方法实现剪裁图片时的预览

//预览数据
interface vueCropperPreviewData {
  div: {
    width: string
    height: string
  } //父盒子style
  html: string //预览的html
  img: {
    width: string
    height: string
    transform: string
  } //img的style
  url: string //本地图片链接（剪裁前）
  h: number //高
  w: number //宽
}
const previewData = ref()
//实时的更新剪裁后的图片数据
const realTime = (data: vueCropperPreviewData) => {
  previewData.value = data
}

在realTime方法回调中，参数返回的是

感兴趣的朋友可以查看官方依赖文件中返回的类型，源码文件路径

vue-cropper/lib/vue-croppe.vue（showPreview函数中）

简单的实现

以上方法其实本人不建议使用，因为展示出的预览效果很局限。

如果想要自定义预览的效果，可以同样的利用realTime()的实时性，再通过VueCropper中的getCropBlob()方法获取剪裁后的Blob数据，再转换成本地链接进行预览。

const cropper = ref>()//vueCropper实例
const previewURL = ref('')
const loading=ref(false)
// 实时的刷新
const realTime = () => {
  if (loading.value) return
  loading.value = true
  // 节流 (非必须)
  setTimeout(() => {
  //将剪裁后的图片转换成本地URL进行预览
    cropper.value.getCropBlob((data: Blob) => {
      //获取剪裁后的图片，就可以对样式进行自定义处理
      previewURL.value = URL.createObjectURL(data)
      console.log(previewURL.value)
      loading.value = false
    })
  }, 500)
}

其他基础功能

为了丰富剪裁的功能，可以通过创建VueCropper实例，使用实例中的方法

实例中的方法

startCrop()	开始截图
stopCrop()	停止截图
clearCrop()	清除截图
changeScale()	修改图片大小 正数为变大 负数变小
getlmgAxis()	获取图片基于容器的坐标点
getCropAxis()	获取截图框基于容器的坐标点
goAutoCrop()	自动生成截图框函数
rotateRight()	向右边旋转90度
rotateLeft()	向左边旋转90度
getCropBlob()	获取剪裁后的图像Blob数据

//选择图片
const selectImg = (e: Event) => {
  const eTarget = e.target as HTMLInputElement
  if (!eTarget.files) return
  const file = eTarget.files[0]
  if (!/\.(jpg|jpeg|png|JPG|PNG)$/.test(eTarget.value)) {
    alert('图片格式错误')
    return false
  }
  const reader = new FileReader()
  reader.readAsDataURL(file) //将文件转化为base64
  reader.onload = e => {
    let data
    if (!e.target) return
    if (typeof e.target.result === 'object') {
      data = URL.createObjectURL(new Blob([e.target.result ?? '']))
    } else {
      data = e.target.result
    }
    option.value.img = data
  }
}
//图片缩放
const changeScale = (num: number) => {
  num = num || 1
  cropper.value.changeScale(num)
}
//向左旋转
const rotateLeft = () => {
  cropper.value.rotateLeft()
}
//向右旋转
const rotateRight = () => {
  cropper.value.rotateRight()
}
//上传图片
const imgUpload = () => {
  //获取截图的blob数据
  cropper.value.getCropBlob(async (data: Blob) => {
    console.log(data)
    // 上传到服务器
  })
}

以上就是简单的通过vue-cropper插件实现简单的图片裁剪了

示例组件代码

为了方便大家在实际中的运用，小编写了个实际的例子，（实现效果为上方gif）

因为是根据小编的习惯，使用的技术为：vue3+ts+el-plus+tailwindcss。大家可以根据自己的习惯和要求进行修改。

以下为全部的示例代码。

欢迎各位大佬评价和讨论...