【Vue】基于Cropperjs的图片裁剪对话框

  Cropper.js是一个功能强大的图像裁剪库，可以在Vue项目中实现图像裁剪的功能。

效果演示

安装

 要使用vue-cropperjs，首先在你的Vue项目中安装它。你可以使用npm或yarn来安装：

npm install vue-cropperjs

 导入cropper库

import Cropper from "cropperjs";
import "cropperjs/dist/cropper.css";

使用

 使用new Cropper创建一个 cropper 实例，对图片进行裁剪。

 其中options可以设置参数。以下是各参数的含义：
viewMode：设置裁剪视图模式，1 表示方形裁剪，2 表示比例裁剪，3 表示填充裁剪。
dragNode：设置裁剪区域的拖动方式，可以是"move"、“resize"或"both”。
initialAspectRatio：设置初始比例，即裁剪区域的宽度和高度之比。
aspectRatio：设置裁剪区域的比例，即裁剪区域的宽度和高度之比。
preview：设置预览区域的元素选择器，用于显示裁剪后的图片。
background：设置是否在裁剪区域背后填充背景色。
autoCropArea：设置自动裁剪区域的大小。
zoomOnWheel：设置是否在鼠标滚轮上下滚动时进行缩放。

代码示例

<template>
  <el-dialog v-model="visible" title="截取图片" :close-on-click-modal="false" :close-on-press-escape="false" width="400px" destroy-on-close>
    <div>
      <div class="container">
        <img :src="image" ref="image" />
      </div>
      <el-text>预览</el-text>
      <div class="preview"></div>
    </div>
    <template v-slot:footer>
      <el-button @click="visible = false">{{ $t("cancel") }}</el-button>
      <el-button type="primary" @click="save">裁剪</el-button>
    </template>
  </el-dialog>
</template>

<script>
import Cropper from "cropperjs";
import "cropperjs/dist/cropper.css";
export default {
  props: {
    image: String // 将需要裁剪的图片传进来
  },
  data() {
    return {
      editor: null,
      visible: false
    };
  },
  methods: {
    // 初始化 Cropper 编辑器
    init() {
      this.editor = new Cropper(this.$refs.image, {
        viewMode: 1, // 设置视图模式为限制在裁剪框内
        dragMode: "none", // 禁止拖拽
        initialAspectRatio: 1, // 初始裁剪框宽高比
        aspectRatio: 1, // 裁剪框宽高比
        preview: ".preview", // 预览窗口选择器
        background: false, // 不显示裁剪框背景
        autoCropArea: 0.7, // 自动选择裁剪区域的大小
        zoomOnWheel: false // 禁用滚轮缩放
      });
    },
    // 保存裁剪结果
    save() {
      const croppedImage = this.editor
        .getCroppedCanvas({
          imageSmoothingQuality: "high" // 设置图像平滑处理质量为高
        })
        .toDataURL("image/png"); // 将结果转为PNG格式的data URL，存储为png可以防止透明度丢失
      this.$emit("finishEdit", croppedImage); // 发送裁剪结果给父组件
      this.visible = false;
    }
  }
};
</script>

<style scoped>
.preview {
  margin: 10px auto;
  width: 100%;
  height: 150px;
  overflow: hidden;
  border: 1px solid red;
}

.container {
  width: 100%;
  height: 200px;
  overflow: hidden;
}
</style>