代码拉取完成,页面将自动刷新
同步操作将从 GLUESTICK/vue-img-cutter 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
简单易用的vue图片裁剪插件,支持旋转、缩放、平移,固定比例,固定尺寸,远程图片裁剪,只需要很少的代码就可以实现裁剪功能,也可以通过调整参数以适应你自己的业务需求。
https://ihtmlcss.com/demo/dist/#/croptool
Github:https://github.com/acccccccb/vue-img-cutter
码云:https://gitee.com/GLUESTICK/vue-img-cutter
如果此项目对你有帮助,请给我一个star :)
npm install vue-img-cutter --save-dev
import ImgCutter from 'vue-img-cutter'
export default {
components:{
ImgCutter
},
...
}
<ImgCutter v-on:cutDown="cutDown"></ImgCutter>
<ImgCutter v-on:cutDown="cutDown">
<button slot="open">选择图片</button>
</ImgCutter>
需要自己写一个方法来触发裁剪工具弹出 在方法中先将图片上传至服务器,拿到返回的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 |
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 |
cutDown | 完成截图后要执行的方法 | Function | 是 | - |
error | 错误回调 | Function | 否 | - |
支持slot,在组件内部使用带有slot="open"属性的元素即可自定义打开组件的按钮
插槽名称 | 作用 |
---|---|
open 或 openImgCutter | 弹出裁剪框 |
choose | 选择本地图片 |
cancel | 取消/清空 |
confirm | 确认裁剪 |
属性名 | 类型 |
---|---|
fileName | 文件名 |
file | file类型的文件对象(IE部分版本可能不会返回) |
blob | blob类型的文件对象(IE部分版本可能不会返回) |
dataURL | dataURL |
ratio | 工具栏:宽高比 |
scaleReset | 工具栏: 重置缩放 |
turnLeft | 工具栏: 向左旋转 |
turnRight | 工具栏: 向右旋转 |
reset | 工具栏: 重置旋转 |
flipHorizontal | 工具栏: 水平翻转 |
flipVertically | 工具栏: 垂直翻转 |
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。