cropperjs下载

npm i cropperjs

npm官网- https://www.npmjs.com/package/cropperjs

---

cropperjs关键参数

• aspectRatio 图片裁剪比例
  • 默认值 ：NaN
  • 作用：图片裁剪比例
  • 值：自定义裁剪比例，例如1 / 1 , 4 / 3 , 16 / 9等

---

• viewMode 裁剪模式
  • 默认值：0
  • 值：
    • 0：无限制
    • 1：限制裁剪框不超过画布的大小。
    • 2：限制画布的最小大小以适应容器。如果画布和容器的比例不同，最小画布将在其中一个维度上被额外的空间包围。
    • 3：限制画布的最小尺寸以填充容器。如果画布和容器的比例不同，则容器将无法在其中一个维度中容纳整个画布。
    • 定义裁剪器的视图模式。如果将viewMode设置为0，则裁剪框可以扩展到画布之外，而值为1、2或3则会将裁剪框限制为画布的大小。viewMode为2或3时，将额外将画布限制为容器。当画布和容器的比例相同时，2和3之间没有区别。

---

• dragMode 裁剪器的拖动模式
  • 默认值：crop
  • 值
    • crop：创建新的裁剪框，将裁剪的区域外删除
    • move：移动画布，裁剪的同时，可拖动图片
    • none：什么也不做，不可拖动图片

---

cropperjs常用方法

• ready([ev])
  • 类型：函数
  • 作用：cropperjs加载完成执行该方法
  • 用作场景：当cropperjs加载完成，可在该方法里获取图片数据。例：cropperjs加载完成，获取第一次裁剪完成的图片数据

---

• cropend(callback([ev]))
  • 类型：函数
  • 作用：鼠标/手指抬起事件，当裁剪完图片时。可在该事件函数里对图片操作，例如将图片转为png,jpg等操作

---

• getCroppedCanvas()
  • 作用： 获取已裁剪的cnavas图片数据
• 类型：函数
• 例↓

cropper.getCroppedCanvas()

---

• setAspectRatio(rt)
  • 类型：函数
  • 作用：设置cropperjs实例的裁剪比例
  • 参数：
    • rt：裁剪比例
      • 类型：Number
  • 例：cropper.setAspectRatio(16 / 9)

---

• replace(url, [hasSameSize])
  • 作用：设置新裁剪的图片url
  • 类型：函数
  • 参数：
    • url：替换图片的url
    • hasSameSize：如果新图像的大小与旧图像的大小相同，那么它将不会重建cropper，而只更新所有相关图像的URL。这可用于应用过滤器。
  • 例：cropperjs.replace('/public/123.png')

---

vue里封装cropperjs组件

• 监听props的作用
  • 改变父级参数，实时改变cropper设置

src/components/cropperjs.vue

<template>
  <div>
    <img ref="image" class="fit img" :src="props.url" />
  </div>
</template>

<script setup>
// 引入cropperjs库与相关css
import Cropper from "cropperjs";
import "cropperjs/dist/cropper.min.css";
import {
       watch, onMounted, ref } from "vue";
import {
       debounce } from "quasar";

// 传来的图片地址
const props = defineProps({
      
    url: "",
    // 比例
    aspectRatio: {
      
      default: 1 / 1,
    },
  }),
  image = ref(null), //img元素
  emit = defineEmits(["clip-img"]);

// 监听props
watch(props, (val) => {
      
  // 设置cropper
  cropper.setAspectRatio(val.aspectRatio);
  cropper.replace(val.url);
});

/**
 * 获取裁剪的base64图片发给父级
 * @param {canvas} cvs canvas数据
 */
const clipImgEmitBase64Img = (cvs) => {
      
  // 将canvas转为图片数据 → 参数1:图片格式[image/webp, image/jpeg, image/png] | 参数2：图片裁剪后的清晰度，相当于压缩图片 0 - 1(只对jpeg与webp有效)
  const base64 = cvs.toDataURL("image/webp", 0.75);

  // 裁剪后发送数据给父级
  emit("clip-img", base64);
};

let cropper = null;
onMounted(() => {
      
  cropper = new Cropper(image.value, {
      
    aspectRatio: props.aspectRatio, //裁剪比例 → [1 / 1, 19 / 9 ,...........]
    viewMode: 1, //裁剪模式 [0,1,2,3]
    dragMode: "move",
    // 重点：加载完成将第一次裁剪的图片数据发给父级
    ready() {
      
      clipImgEmitBase64Img(this.cropper.getCroppedCanvas());
    },
    // 鼠标、手指移开触发
    cropend() {
      
      clipImgEmitBase64Img(this.cropper.getCroppedCanvas());
    },
      // 缩放触发，这里最好用防抖函数，不然缩放非常卡，影响用户体验，加入我已有防抖，例子如下
    // zoom: debounce(function () {
      
    //   clipImgEmitBase64Img(this.cropper.getCroppedCanvas());
    // }, 500),

    zoom() {
      
      clipImgEmitBase64Img(this.cropper.getCroppedCanvas());
    },
    // 缩放触发
    zoom() {
      
      clipImgEmitBase64Img(this.cropper.getCroppedCanvas());
    },
  });
});
</script>

<style scoped>
.img {
      
  object-fit: contain;
  max-width: 100%;
  width: 100%;
  height: 100%;
}
</style>

简单使用cropperjs组件

src/views>HomeView.vue

<template>
	<button @click="updateImgUrl">修改图片</button>
    <cropper :url="clipImgCfg.url" @clip-img="clipImg" />
      
</template>

<script setup>
import {
       reactive } from 'vue';
const clipImgCfg = reactive({
      
  url:'/public/111.jpg',
  rt:1 / 1
})

const updateImgCfg = ()=> {
      
  clipImgCfg.url='/public/99999.jpg' 
  clipImgCfg.rt=16 / 9 
}

// 裁剪后的图片事件
const clipImg = imgData => console.log(imgData)
</script>

效果图

---

base64转文件对象File

• 当图片裁剪后需转file对象上传服务器时↓
  base64转文件对象File
• 备用地址 - http://t.csdn.cn/jQ1A5