vue-img-cutter

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

特色：

兼容IE9+,MSEdge,Chrome,Firefox

两种展现形式，行内或弹窗

可旋转、缩放图片

任意比例、大小裁剪

固定比例、大小裁剪

支持远程图片裁剪、跨域设置

插件截图：

演示地址：

项目地址：

如果此项目对你有帮助，请给我一个star :)

使用方法：

安装

npm installvue-img-cutter --save-dev

将ImgCutter.vue文件引入项目：

import ImgCutter from 'vue-img-cutter'

export default {

components:{

ImgCutter

},

...

}

在页面中使用：

可使用solt

选择图片

远程、跨域裁剪(兼容IE9)

需要自己写一个方法来触发裁剪工具弹出

在方法中先将图片上传至服务器，拿到返回的url后创建一个obj，然后将对象传入裁剪工具

// 传入的obj必须包含这四个属性

let obj = {

name:'1.jpg',//远程图片名称

src:'http://url/1.jpg',//远程图片url

width:200,//远程图片的原始宽度

height:200,//远程图片的原始高度

}

forIe9:function(){

// 此处需要先提交待裁剪的图片到服务器上，然后拿到图片name,src,width,height,这些参数必须传

uploadMethod(file).then((res)=>{

this.$refs.imgCutterModal.handleOpen({

name:res.name,

src:res.src,

width:res.width,

height:res.height,

});

});

}

参数说明：

属性名

作用

类型

必填

默认值

isModal

是否为弹窗模式

Boolean

否

true

showChooseBtn

是否显示选择图片按钮

Boolean

否

true

lockScroll

是否在Dialog出现时将body滚动锁定

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

crossOrigin

是否设置跨域，需要服务器做相应更改

Boolean

否

false

crossOriginHeader

设置跨域信息crossOrigin为true时才生效

String

否

''

rate

图片比例

String(例: "4:3")

否

-

cutDown

完成截图后要执行的方法

Function

是

-

error

错误回调

Function

否

-

支持slot，在组件内部使用带有slot="open"属性的元素即可自定义打开组件的按钮

插槽(slot)：

插槽名称

作用

open 或 openImgCutter

弹出裁剪框

choose

选择本地图片

cancel

取消/清空

confirm

确认裁剪

返回值：

属性名

类型

fileName

文件名

file

file类型的文件对象(IE部分版本可能不会返回)

blob

blob类型的文件对象(IE部分版本可能不会返回)

dataURL

dataURL

开发中功能：

原图裁剪 开发中

捐赠:

更新日志：

2.0.30

修复了选区超出画布的问题

2.0.29

优化了裁剪控件的操作体验

当裁剪宽度/高度小于20时隐藏四边中间的操作杆

2.0.28

调整了版本号显示的位置

新增三个插槽：choose/cancel/confirm

新增属性：工具栏背景色 toolBgc

将裁剪框限制在画布内

2.0.27

修正了裁剪远程图片时创建的img对象被显示出来的问题

修正了在IE浏览器下点击取消按钮报错的问题

远程图片加载失败时不弹出裁剪工具

2.0.26

修正了当没有选择图片直接选择取消会导致错误的问题

2.0.25

更新说明文档

2.0.24

简化了兼容IE9的方法，只需要在执行this.$refs['yourComponent'].handleOpen(imgObj)时传入对象，对象必须包含name,src,width,height属性

修正了行内模式下鼠标滚轮缩放失效的问题

增加了跨域参数

增加了 error 参数，将会返回错误信息

2.0.23

新增参数isModal/showChooseBtn/lockScroll

可选择作为行内组件或者弹窗组件，可选是否显示选择图片按钮，是否在弹窗打开时锁定body滚动

2.0.22

兼容IE9+,MSEdge,chrome,firefox

由于没有找到IE11以下的浏览器，所以只能在仿真模式下测试，所以IE11以下可能会出现一些我没发现的问题，目前仿真模式下IE9+都测试通过了。IE8及以下不再支持。

如果需要兼容IE9，需要先将图片上传到服务器上，然后执行this.$refs['yourComponent'].handleOpen(callback);

添加了importImgToCanv方法来兼容IE9，必须在执行handleOpen后才能执行

拖动，调整选框时会自动隐藏工具栏

稍微调整了下样式，增加了动态的蚂蚁线

2.0.21

兼容IE8+,MSEdge,chrome,firefox

新增了设置参数，可固定裁剪框位置，固定裁剪尺寸，具体请看参数说明

修复了非IE系浏览器不返回file对象的问题

2.0.20

兼容IE11+,MSEdge。IE11以下版本未测试

2.0.19

修改了返回值，现在将追加返回文件名和file类型的文件对象

2.0.18

修复了点击选择图片按钮时有一定几率刷新页面的问题

2.0.17

调整了样式

修正了弹窗超出屏幕后被遮挡的问题

2.0.16

修正了旋转工具条显示错误的问题

2.0.15

增加工具栏 可对图片进行旋转/缩放操作

优化了动画效果