Vue3+cropperjs 实现图片裁剪功能-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue3+cropperjs 实现图片裁剪功能。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

安装cropperjs

npm install cropperjs --save
或者
yarn add cropperjs

封装一个cropperImg组件

//cropperImg.vue
<template>
  <div>
    <!--使用ref属性给图片元素命名为imageRef-->
    <img ref="imageRef" :src="imageSrc" alt="image" >
    <button @click="cropImage">裁剪图片</button>
  </div>
</template>

<script setup>
import {ref, onMounted, onBeforeUnmount} from "vue";
  import Cropper from 'cropperjs';
  import "cropperjs/dist/cropper.css";
  const props = defineProps({
    //图片地址
    imageSrc: {
      type: String,
      required: true
    },
    //aspectRatio:置裁剪框为固定的宽高比
    aspectRatio: {
      type: Number,
      default: 1,
    },
    //viewMode: 视图控制
    viewMode: {
      type: Number,
      default: 1,
    },
    //autoCropArea: 设置裁剪区域占图片的大小 值为 0-1 默认 0.8 表示 80%的区域
    autoCropArea: {
      type: Number,
      default: 1,
    },
  })
  //绑定图片的dom对象
  const imageRef = ref(null)
  let cropper = null;
  //使用Cropper构造函数创建裁剪器实例，并将图片元素和一些裁剪选项传入
  onMounted(() => {
    cropper = new Cropper(imageRef.value, {
      aspectRatio: props.aspectRatio,
      viewMode: props.viewMode,
      autoCropArea: props.autoCropArea,
    });
  });

  //定义方法
  const emit = defineEmits(['updateImageSrc'])
  //在cropImage函数中，获取裁剪后的图片数据URL，并使用emit方法触发updateImageSrc事件，
  // 将裁剪后的图片数据URL传递给父组件。
  const cropImage = () => {
    const canvas = cropper.getCroppedCanvas();
    const croppedImage = canvas.toDataURL();
    emit('updateImageSrc', croppedImage);
  }

  //销毁
  onBeforeUnmount(()=>{
    cropper.destroy()
  })


</script>

在以上代码中，我们使用props属性，用于传入裁剪器的配置项和需要裁剪的图片地址。在onMounted生命周期钩子中，使用传入的props创建裁剪器实例，并将图片元素和一些裁剪选项传入。

在cropImage函数中，获取裁剪后的图片数据URL，并使用emit方法触发updateImageSrc事件，将裁剪后的图片数据URL传递给父组件。

使用

<template>
  <cropper-img :imageSrc="imageSrc" @updateImageSrc="updateImageSrc" />
  <div>
    <p>预览图片</p>
    <img :src="imageNew" alt="">
  </div>
</template>

<script setup>
import {reactive, ref,} from "vue";
import CropperImg from "../../components/cropperImg.vue";

const imageSrc = ref('https://cdn.tehub.com/uploads/bCChGvhsbU/u/avatar/a2885f74-5400-48a1-fa93-a0bbdb7bddd6.jpeg?imageView2/1/w/200/h/200/q/100')
//定义一个imageNew变量来接收裁剪之后的图片
const imageNew = ref()
//点击裁剪按钮
const updateImageSrc = (updateImageSrc) => {
  imageNew.value = updateImageSrc
}

</script>

cropperjs配置项

cropperjs文档：cropperjs/README.md at main · fengyuanchen/cropperjs · GitHub

这里列出几个常用的配置项：

viewMode 视图控制

0 无限制
1 限制裁剪框不能超出图片的范围
2 限制裁剪框不能超出图片的范围且图片填充模式为 cover 最长边填充
3 限制裁剪框不能超出图片的范围且图片填充模式为 contain 最短边填充

dragMode 拖拽图片模式文章来源地址https://www.toymoban.com/news/detail-446884.html

crop 形成新的裁剪框
move 图片可移动
none 什么也没有
initialAspectRatio 裁剪框宽高比的初始值默认与图片宽高比相同只有在aspectRatio没有设置的情况下可用
aspectRatio 设置裁剪框为固定的宽高比
data 之前存储的裁剪后的数据在初始化时会自动设置只有在autoCrop设置为true时可用
preview 预览设置一个区域容器预览裁剪后的结果
responsive 在窗口尺寸调整后进行响应式的重渲染默认true
restore 在窗口尺寸调整后恢复被裁剪的区域默认true
checkCrossOrigin 检查图片是否跨域默认true 如果是会在被复制的图片元素上加上属性crossOrigin 并且在src上加上一个时间戳避免重加载图片时因为浏览器缓存而加载错误
checkOrientation 检查图片的方向信息（仅JPEG图片有）默认true 在旋转图片时会对图片方向值做一些处理以解决IOS设备上的一些问题
modal 是否显示图片和裁剪框之间的黑色蒙版默认true
guides 是否显示裁剪框的虚线默认true
center 是否显示裁剪框中间的 ‘+’ 指示器默认true
highlight 是否显示裁剪框上面的白色蒙版（很淡）默认true
background 是否在容器内显示网格状的背景默认true
autoCrop 允许初始化时自动的裁剪图片配合 data 使用默认true
autoCropArea 设置裁剪区域占图片的大小值为 0-1 默认 0.8 表示 80%的区域
movable 是否可以移动图片默认true
rotatable 是否可以旋转图片默认true
scalable 是否可以缩放图片（可以改变长宽）默认true
zoomable 是否可以缩放图片（改变焦距）默认true
zoomOnTouch 是否可以通过拖拽触摸缩放图片默认true
zoomOnWheel 是否可以通过鼠标滚轮缩放图片默认true
wheelZoomRatio 设置鼠标滚轮缩放的灵敏度默认 0.1
cropBoxMovable 是否可以拖拽裁剪框默认true
cropBoxResizable 是否可以改变裁剪框的尺寸默认true
toggleDragModeOnDblclick 是否可以通过双击切换拖拽图片模式（move和crop）默认true 当拖拽图片模式为none时不可切换该设置必须浏览器支持双击事件
minContainerWidth（200）、minContainerHeight（100）、minCanvasWidth（0）、minCanvasHeight（0）、minCropBoxWidth（0）、minCropBoxHeight（0）容器、图片、裁剪框的最小宽高括号内为默认值注意裁剪框的最小高宽是相对与页面而言的并非相对图片