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 地址