vue图片裁剪插件：vue-img-cutter

vue图片裁剪插件：vue-img-cutter

vue-img-cutter 是一个简单易用的 vue 图片裁剪插件，支持旋转、缩放、平移，固定比例，固定尺寸，远程图片裁剪，只需要很少的代码就可以实现裁剪功能，也可以通过调整参数以适应你自己的业务需求

特点：

• 兼容IE9+，MSEdge，Chrome，Firefox
• 两种展现形式，行内或弹窗
• 可旋转、缩放图片
• 任意比例、大小裁剪
• 固定比例、大小裁剪
• 支持远程图片裁剪、跨域设置

使用：

安装 vue-img-cutter

npm install vue-img-cutter --save-dev

在项目中使用

• 在需要使用的页面中引入 vue-img-cutter，并注册成组件

<script>
//引入vue-img-cutter
import ImgCutter from 'vue-img-cutter'

export default {
    name: 'imgCutter',
    data() {
       return {
          
       }
    },
    //将vue-img-cutter注册成组件
    components:{
        ImgCutter
    }
}
</script>

在页面中使用组件，并绑定 cutDown 事件，用来接收选择的图片信息

<template>
   <div>
   	  //使用组件，并绑定cutDown事件
      <ImgCutter @cutDown="cutDown"></ImgCutter>
   </div>
</template>

<script>
import ImgCutter from 'vue-img-cutter'

export default {
    name: 'imgCutter',
    data() {
       return {
          
       }
    },
    components:{
        ImgCutter
    },
    methods: {
       //通过cutDown事件接收选择的图片信息
       cutDown(event) {
           console.log(event)
       }
    }
}
</script>

组件参数选择：

 

组件自定义插槽选项：

 

组件钩子函数：

 cutDown 事件接收选择的图片的信息值（返回值）：

 

 选择图片并裁剪需要的大小：

 确定后，cutDown 事件获取到的图片信息：