前端图片上传前裁切处理->cropperjs

前端上传图片前调整裁切1

// 安装插件
yarn add cropperjs

// 导入插件
import 'cropperjs/dist/cropper.css'
import Cropper from 'cropperjs'

插件的初始化

// init方法需要在nextTick中调用, 因为newCropper()接收的第一个是dom对象
let cropper = ref(null)
const init = () => {
  cropper.value = new Cropper(imageRef.value, {
    viewMode: 1, // 只能在裁剪的图片范围内移动
    dragMode: 'move', // 画布和图片都可以移动
    aspectRatio: 1, // 裁剪区默认正方形
    autoCropArea: 1, // 自动调整裁剪图片
    cropBoxMovable: false, // 禁止裁剪区移动
    cropBoxResizable: false, // 禁止裁剪区缩放
    background: false // 关闭默认背景
  })
}

将用户选择的图片显示出来, 并初始化插件

// 当用户选择了图片后, 将拿到的图片转换为临时地址
const handleChange = (file) => {
  const url = URL.createObjectURL(file.target.files[0])
  // 将临时地址装载到img标签上让它显示出来
  imgSrc.value = url
  nextTick(() => {
    init()
  })
}

裁切完毕的上传操作

const ok = () => {
  // 调用插件实例对象身上的getCroppedCanvas()得到裁切好的数据, 转为blob
  cropper.value.getCroppedCanvas().toBlob(async blob => {
    // 将blob数据转换为file对象
    let file = new File([blob], "test.jpg", { type: blob.type })
    // 创建FormData类型, 将file对象添加进去
    const data = new FormData()
    data.append('avatar', file)
    // 上传
    const { data: { data: res } } = await axios({
      url: 'http://ajax-api.itheima.net/api/file',
      method: 'post',
      data
    })
    console.log(res.url)

  })
}

GitHub - fengyuanchen/cropperjs: JavaScript image cropper.