图片裁切器的使用

时间：2025-04-07 07:54:47

        cropperjs是一款非常强大却又简单的图片裁剪工具，它可以进行非常灵活的配置，支持手机端使用，支持包括IE9以上的现代浏览器。

  • 支持 39 个选项
  • 支持27种方法
  • 支持6个事件
  • 支持触摸（移动）
  • 支持缩放
  • 支持旋转
  • 支持缩放（翻转）
  • 支持多种作物
  • 支持在画布上裁剪
  • 支持通过画布在浏览器端裁剪图像
  • 支持翻译 Exif 方向信息
  • 跨浏览器支持

官方github文档：/fengyuanchen/cropperjs

使用方法

1.下载

npm install cropperjs

2.在项目中引入

import 'cropperjs/dist/'
import Cropper from 'cropperjs'

3.获取dom对象 调用构造函数

<img :src="image" alt="" ref="img" />

注意需要用块元素（容器）包裹图像或画布元素

例如：

< div > 
  < img  id =" image " src ="  " > 
</ div >

确保图像大小完全合适容器

img {
   display : block; /* 这个规则很重要，请不要忽略这个 */ 
   max-width : 100 % ; 
}

调用构造函数 传入配置对象 得到cropper 实例对象

    // 获取Dom对象
    const image = this.$
    // 得到实例对象
     = new Cropper(image, {
      aspectRatio: 1, // 裁剪框尺寸
      viewMode: 1, // 限制裁剪框不超过画布的大小
      dragMode: 'move', // 定义裁剪器的拖动模式。 移动画布
      cropBoxResizable: false, // 通过拖动来调整裁剪框的大小
      cropBoxMovable: false, // 通过拖动移动裁剪框。
      background: false // 显示容器的网格背景
    })

因为我们在方法中需要调用cropper 实例对象上的getCroppedCanvas() 方法得到裁切后的图片信息将cropper 保存到了data中

4.获取裁切后的图片 (包装为Promise) 可以在下面通过 await 调用

    getCroppedCanvas () {
      return new Promise(resolve => {
        ().toBlob(blob => {
          resolve(blob)
        })
      })
    }

5.获取到裁切之后的图像

const file = await ()

代码演示 

<template>
  <div class="updata-photo">
    <img :src="image" alt="" ref="img" />
    <van-nav-bar
      left-text="取消"
      right-text="确认"
      @click-left="$emit('close')"
      @click-right="onClickRight"
    />
  </div>
</template>

<script>
import { setPhotofile } from '@/api/'
import 'cropperjs/dist/'
import Cropper from 'cropperjs'
export default {
  name: 'UpdataPhoto',
  props: {
    value: {
      type: String,
      require: true
    },
    file: {
      type: File,
      require: true
    }
  },
  data () {
    return {
      image: (),
      cropper: null
    }
  },
  methods: {
    // 获取裁切后的图片 (包装为Promise) 可以在下面通过 await 调用
    getCroppedCanvas () {
      return new Promise(resolve => {
        ().toBlob(blob => {
          resolve(blob)
        })
      })
    },

    // 发起请求
    async onClickRight () {
      this.$({
        message: '修改中...',
        forbidClick: true
      })
      // 获取到裁切之后的图像
      const file = await ()
      // 如果要求 Content-Type 是 multipart/form-data,则一定要提交FormData 数据对象，专门用于文件上传的，不能提交{}
      const fd = new FormData()
      ('photo', file)
      const res = await setPhotofile(fd).catch(err => err)
      if ( !== 201) {
        this.$('修改失败')
        return
      }
      this.$('修改成功')
      // 修改完成之后 更新父组件中的地址并关闭弹出层
      this.$emit('input', )
      this.$emit('close')
    }
  },
  mounted () {
    const image = this.$
     = new Cropper(image, {
      aspectRatio: 1, // 裁剪框尺寸
      viewMode: 1, // 限制裁剪框不超过画布的大小
      dragMode: 'move', // 定义裁剪器的拖动模式。 移动画布
      cropBoxResizable: false, // 通过拖动来调整裁剪框的大小
      cropBoxMovable: false, // 通过拖动移动裁剪框。
      background: false // 显示容器的网格背景
    })
  }
}
</script>

<style lang="less" scoped>
.updata-photo {
  img {
    display: block;
    width: 100%;
  }
  .van-nav-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: transparent;
  }
}
</style>

相关文章