react-crop-vx
这是一款仿微信的 react 裁剪组件,裁剪模式:除了可等比拉伸裁剪,还可以垂直、水平拉伸裁剪,操作性更强;裁剪形状:支持矩形和圆形,后续将支持更多形状✌。
下载安装
npm i react-crop-vx --save
快速使用
;; const src = "http://baidu.com/img1.jpg"; // 无效url { console} // 矩形列子const crop1 = width:50 height:50 x:30 y:30; { return <Crop src=src crop=crop1 onComplete=complete /> } // 圆形例子const crop2 = radius:50 x:30 y:30; { return <Crop src=src crop=crop2 onComplete=complete circleClip /> } // 其他例子const crop = radius:50 x:30 y:30; const style = width: 550 height: 314 // 目前该参数无效,以width为准 { return <div style=transform:'scale(0.5,0.5)' > <Crop src=src crop=crop onComplete=complete style=style minWidth=50 minHeight=50 isBoundary transform= scaleX: 05 scaleY: 05 // 需配合外层css transform时使用 /> </div> ;}
参数说明
参数 | 必填 | 默认值 | 类型 | 说明 |
---|---|---|---|---|
src | 是 | null | String | 裁剪图片地址 |
crop | 是 | null | Object | 裁剪参数,详见下方 crop |
circleClip | 否 | false | Boolean | 当 circleClip 为 true 时,代表圆形裁剪,false 为矩形裁剪 |
isBoundary | 否 | false | Boolean | 当 isBoundary 为 true 时,限制裁剪框在图片内,不超出图片边界,false 则不限制边界 |
minWidth | 否 | 0 | Number | 设置允许裁剪框的最小宽度 |
minHeight | 否 | 0 | Number | 设置允许裁剪框的最小高度 |
style | 否 | 原图的宽度和高度 | Object | 为了保持图片不变形,目前只可修改 width 来控制,height无效 |
transform | 否 | { scaleX: 1, scaleY: 1 } | Object | css transform 控制组件时保持一致的方法,具体见下方特别说明 |
onComplete | 是 | null | Function | 裁剪完成的回调函数,返回相关裁剪信息 |
特别说明:transform:当图片过大,通过 transform 缩放整个组件时,拖拽和缩放元素速度会有影响,应设置 transform 属性与你组件外层样式属性一致;
crop(矩形)
crop 参数 | 必填 | 默认值 | 类型 | 说明 |
---|---|---|---|---|
width | 是 | null | Number | 裁剪框的宽 |
height | 是 | null | Number | 裁剪框的高 |
x | 是 | null | Number | 以裁剪框左上角为原点的 X 坐标 |
y | 是 | null | Number | 以裁剪框左上角为原点的 Y 坐标 |
crop(圆形)
crop 参数 | 必填 | 默认值 | 类型 | 说明 |
---|---|---|---|---|
radius | 是 | null | Number | 裁剪框的半径 |
x | 是 | null | Number | 以裁剪框左上角为原点的 X 坐标 |
y | 是 | null | Number | 以裁剪框左上角为原点的 Y 坐标 |
onComplete(res)
res 参数 | 类型 | 说明 |
---|---|---|
src | String | 裁剪后的图片地址 |
origin | Object | 原图的相关属性,详见下方 origin |
origin
origin 参数 | 类型 | 说明 |
---|---|---|
src | String | 原图地址 |
x | Number | 裁剪框在图片中的 x 位置 |
y | Number | 裁剪框在图片中的 y 位置 |
width | Number | 裁剪框的宽 |
height | Number | 裁剪框的高 |
imgScaleRatio | Number | 图片相对于原图的缩放比例 |
注意事项
1.以上单位都是 px;
版本日志
v1.0.0
1.react 裁剪组件发布 react-crop-vx
v1.0.2
1.取消style内的transform改为计算实现;
v1.0.3
1.解决onComplete的参数等比计算;
v1.0.4
1.解决crop x y 为0时就报错问题;
v1.1.0
1.增加onComplete中imgScaleRatio参数;
2.去除onComplete的参数等比计算;
v1.1.1
1.修复imgScaleRatio参数错误问题;
2.去除默认裁剪;
讨论与交流 😛
目前因为项目原因制作了这一款裁剪组件,还在持续优化中...,欢迎大家一起讨论,如使用过程中遇到bug,或者有什么新的需求,欢迎告诉我,我会尽快优化,谢谢大家!