图片裁剪工具cropperjs

cropperjs官网： Cropper.js
html使用：
后期更新
vue使用：
下载：npm install cropperjs
引用：
import "cropperjs/dist/cropper.css";
import Cropper from "cropperjs";
使用：
//裁剪区域：
<img :src="ImageTempPath" alt="图片" class="image" ref="imgRef"crossorigin="anonymous"/>

//预览区域：
<img src="./no-seal-img.jpg" alt="" crossorigin="anonymous"/>

//操作区域：
<el-button type="primary" size="mini" @click="EditSeal('tailor')">裁剪</el-button>
<el-button type="primary" size="mini" @click="EditSeal('blowUp')">放大</el-button>
<el-button type="primary" size="mini" @click="EditSeal('reduce')">缩小</el-button>
<el-button type="primary" size="mini"@click="EditSeal('Leftrotate')">左旋转</el-button>
<el-button type="primary" size="mini"@click="EditSeal('Rightrotate')">右旋转</el-button>
<el-button type="primary" size="mini"@click="EditSeal('restore')">还原</el-button>

<script>
import "cropperjs/dist/cropper.css";
import Cropper from "cropperjs";
export default {
  name: "handleImg",
  data() {
    return {
      cropper: null,
       img: {},
      ImageTempPath:
        "https://tse2-mm.cn.bing.net/th/id/OIP-C.b7mT0r1Qe8Qe8hQVA-7npQHaHF?w=218&h=209&c=7&r=0&o=5&dpr=1.3&pid=1.7",
    };
  },
  mounted() {
    this.cropImage();
  },
  methods: {
    cropImage() {
      this.cropper = new Cropper(this.$refs.imgRef, {
        // aspectRatio: 1 / 1, // 裁剪框的默认比例
        preview: ".previewImg", // 预览视图
        viewMode: 1, //0 无限制 1 限制裁剪框不能超出图片的范围 2 限制裁剪框不能超出图片的范围 且图片填充模式为 cover 最长边填充3 限制裁剪框不能超出图片的范围 且图片填充模式为 contain 最短边填充
        autoCropArea: 0.65, // 0-1之间的数值，定义自动剪裁区域的大小，默认0.8
        resizable: true, // 是否允许改变裁剪框的大小
        scalable: true, //是否可以缩放图片，默认true
        restore: false, //窗口改变后 恢复被裁剪的区域 默认true
        dragMode: "none", // none禁止重新框选选取
        // cropBoxMovable: true, // 是否可以拖拽裁剪框 默认true
        // cropBoxResizable: true, // 是否可以改变裁剪框的尺寸 默认true
        // dragCrop: false, // 是否允许移除当前的剪裁框，并通过拖动来新建一个剪裁框区域
        // autoCrop: true, //允许初始化时自动的裁剪图片 配合 data 使用 默认true
        // movable: true, // 是否允许移动图片，默认true
        // zoomable: true, // 是否允许缩放图片大小，默认true
        // zoomOnTouch: true, //是否可以通过拖拽触摸缩放图片 默认true
        // zoomOnWheel: true, // 是否可以通过鼠标滚轮缩放图片 默认true
        // mouseWheelZoom: true, // 是否允许通过鼠标滚轮来缩放图片
        // touchDragZoom: true, // 是否允许通过触摸移动来缩放图片
        // wheelZoomRatio: 0.2, //设置鼠标滚轮缩放的灵敏度 默认 0.1
        // rotatable: true, // 是否允许旋转图片，默认true
        // modal: true, //是否显示图片和裁剪框之间的黑色蒙版 默认true
        // center: true, // 是否显示裁剪框中间的 ‘+’ 指示器 默认true
        // guides: true, // 是否显示裁剪框的虚线(九宫格)
        // highlight: true, // 是否显示裁剪框上面的白色蒙版 （很淡）默认true
        // background: true, //是否在容器内显示网格状的背景 默认true
        // dragMode: "none", // 禁止重新框选选取
        // toggleDragModeOnDblclick: true, //是否可以通过双击切换拖拽图片模式（move和crop）默认true 当拖拽图片模式为none时不可切换 该设置必须浏览器支持双击事件
        // responsive: true, //窗口改变后，重新渲染，默认true
        // restore: true, //窗口改变后 恢复被裁剪的区域 默认true
        // checkCrossOrigin: true, //检查图片是否跨域 默认true
        // checkOrientation: true, //检查图片的方向信息（仅JPEG图片有）默认true

        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(this.cropper);
    },

 EditSeal(method) {
      if (method) {
        switch (method) {
          case "tailor":
            this.tailor();
            break;
          case "blowUp":
            this.cropper.zoom(0.1);
            break;
          case "reduce":
            this.cropper.zoom(-0.1);
            break;
          case "Leftrotate":
            this.cropper.rotate(5);
            break;
          case "Rightrotate":
            this.cropper.rotate(-5);
            break;
          case "restore":
            this.cropper.reset();
            break;
        }
      }
    },
 tailor() {
      var result = this.cropper.getCroppedCanvas(); //获取裁剪后数据
      var base64url = result.toDataURL("image/jpeg");
      this.img.FileBase64 = base64url;

      var File = this.base64ToFile(base64url, " ");

      var blobURL = URL.createObjectURL(File);
      this.cropper.reset();              //重置数据
      this.cropper.replace(blobURL);     //更换当前图片为裁剪后的图片
      console.log(result, base64url, File, blobURL);
    },
    },
  },
};
</script>
图片裁剪工具cropperjs

猜你喜欢
