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

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

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

特点：

• 兼容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>
  

  组件参数选项：

  属性	作用	类型	是否必填	默认值
  isModal	是否为弹窗模式	Boolean	否	true
  showChooseBtn	是否显示选择图片按钮	Boolean	否	true
  lockScroll	是否在弹窗出现时锁定页面滚动	Boolean	否	true
  label	选择图片按钮的显示文字	String	否	选择图片
  boxWidth	裁剪工具宽度	Number	否	800
  boxHeight	裁剪工具高度	Number	否	400
  cutWidth	默认裁剪宽度	Number	否	200
  cutHeight	默认裁剪高度	Number	否	200
  tool	是否显示工具栏	Boolean	否	true
  toolBgc	工具栏背景颜色	String(例: “#fff”)	否	‘#fff’
  sizeChange	是否能够调整裁剪框大小	Boolean	否	true
  moveAble	是否能够调整裁剪区域位置	Boolean	否	true
  originalGraph	是否裁剪原图	Boolean	否	false
  crossOrigin	是否设置跨域，需要服务器做相应设置	Boolean	否	false
  crossOriginHeader	设置跨域信息（crossOrigin 为 true 时生效）	String	否	"
  rate	裁剪图片宽高比例	String(例: “4:3”)	否	-
  WatermarkText	水印文字	String	否	"
  WatermarkTextFont	水印文字字体	String	否	‘12px Sans-serif’
  WatermarkTextColor	水印文字颜色	String	否	‘#fff’
  WatermarkTextX	水印文字水平位置	Number	否	0.95
  WatermarkTextY	水印文字垂直位置	Number	否	0.95
  smallToUpload	如果裁剪尺寸固定且图片尺寸小于裁剪尺寸则不裁剪直接返回文件	Boolean	否	false
  saveCutPosition	是否保存上一次裁剪位置及大小	Boolean	否	false
  scaleAble	是否允许滚轮缩放图片	Boolean	否	true

  组件自定义插槽选项：

  插槽名	作用
  open 或 openImgCutter	页面中选择图片按钮
  choose	弹窗工具中选择图片按钮
  cancel	弹窗工具中取消按钮
  confirm	弹窗工具中确定按钮
  ratio	弹窗工具栏：宽高比例按钮
  scaleReset	弹窗工具栏：重置缩放按钮
  turnLeft	弹窗工具栏：向左旋转按钮
  turnRight	弹窗工具栏：向右旋转按钮
  reset	弹窗工具栏：重置旋转按钮
  flipHorizontal	弹窗工具栏：水平翻转按钮
  flipVertically	弹窗工具栏：垂直翻转按钮

  组件钩子函数：

  函数名	作用	类型	是否必填	返回值
  cutDown	完成截图后执行	Function	是	Object
  error	发生错误时执行	Function	否	Error object
  onChooseImg	选择图片后执行	Function	否	Object
  onPrintImg	绘制图片时执行	Function	否	Object
  onClearAll	清空画布	Function	否	null

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

  属性	描述
  fileName	文件名
  file	file 类型的文件对象（IE部分版本可能不会返回）
  blob	blob 类型的文件对象（IE部分版本可能不会返回）
  dataURL	文件的 url 地址

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

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