欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

图片裁剪(cropperjs)

程序员文章站 2022-04-09 13:09:16
...

一、img预览框拿到blob图片信息

这里只有主要代码

<input type="file" hidden ref="inputFile" @change="updateImg" />
const file = this.$refs.inputFile.files[0]
// 拿到blob图片信息
this.img = window.URL.createObjectURL(file)

二、cropperjs使用

1、安装cropperjs

npm install cropperjs

2、引入css、js

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

3、在mounted中初始化

const image = this.$refs.img
const cropper = new Cropper(image, {
    aspectRatio: 16 / 9,
    crop (event) {
        console.log(event.detail.x)
        console.log(event.detail.y)
        console.log(event.detail.width)
        console.log(event.detail.height)
        console.log(event.detail.rotate)
        console.log(event.detail.scaleX)
        console.log(event.detail.scaleY)
    }
})
console.log(cropper)

4、配置cropperjs

const cropper = new Cropper(image, {
    viewMode: 1, // 只能在裁剪的图片范围内移动
    dragMode: 'move', // 画布和图片都可以移动
    aspectRatio: 1, // 裁剪区默认正方形
    autoCropArea: 1, // 自动调整裁剪图片
    cropBoxMovable: false, // 禁止裁剪区移动
    cropBoxResizable: false, // 禁止裁剪区缩放
    background: false, // 关闭默认背景
    movable: true
})

5、裁切的两种方式

5.1 服务端

(1)获取cropper实例
this.cropper = new Cropper(image, {
      viewMode: 1, // 只能在裁剪的图片范围内移动
      dragMode: 'move', // 画布和图片都可以移动
      aspectRatio: 1, // 裁剪区默认正方形
      autoCropArea: 1, // 自动调整裁剪图片
      cropBoxMovable: false, // 禁止裁剪区移动
      cropBoxResizable: false, // 禁止裁剪区缩放
      background: false // 关闭默认背景
    })
(2) 给确定注册点击事件,在事件函数中获取参数
<span @click="confirm">完成</span>
confirm () {
	// this.cropper.getData()获取的数据传给后端,后端实现裁剪
    console.log(this.cropper.getData())
}

5.2 客户端

confirm () {
	  // 前端裁剪好,将裁剪好的blob图片直接传给后端
     this.cropper.getCroppedCanvas().toBlob(async blob => {
        // 创建formData数据
        const formData = new FormData()
        formData.append('photo', blob)
        // 发请求
        const res = await updateUserAvatar(formData)
    }
相关标签: js vue web