@shihuo/image-free-crop-component NPM

图片自由裁剪

@shihuo/image-free-crop-component

图片裁剪组件

# 安装依赖
npm i -s @shihuo/image-free-crop-component

# 更新依赖
npm update @shihuo/image-free-crop-component

参数名	说明	必填	类型	默认值	备注
preventMessage	是否阻止弹出内置信息框		boolean	false
setSelect	裁剪框配置		Array	0, 0, 400, 400	x, y, witdh, heightx：裁剪框起始 x 轴y：裁剪框起始 y 轴width：裁剪框渲染起始宽度height：裁剪框渲染起始高度
boxWidth	容器宽度		number	600
boxHeight	容器最小高度		number	600
bgColor	裁剪框背景色		string	#2c7152	十六进制色值
ratio	裁剪框固定宽高比例		stirng/number	0	0 表示不限制宽高比例number: 表示宽/高比例值string: 支持"1:1" "3:4"等格式
src	待裁切的图片链接	必填	string
onCropChange	裁切结果改变时回调		function		入参：coordinate：coordinate.x：x 坐标coordinate. y：y 坐标coordinate.w：裁剪宽度coordinate.h：裁剪高度
uploader	上传控件		Uploader	null	v1.3.0+支持fusion 或@shihuo/upload-component 库通过 new Uploader()得到的上传核心对象，裁剪后直接上传图片
uploadAfterCrop	裁剪后上传		boolean	false	v1.3.6+支持上传控件默认使用@shihuo/upload-component可自定义传入上传控件，参见uploader
beforeCrop	裁剪触发前触发		function
onSuccess	裁剪成功后触发		function		返参：image: 裁剪后的图片 base64coordinate：同 getCoordinate 返回
onError	裁剪失败触发		function
onComplate	裁剪成功或失败都会触发		function
bgOpacity	裁剪背景透明度		number	0.5	v1.4.0新增
minSize	裁剪最小范围		array	0, 0	v1.4.0新增
maxSize	裁剪最大范围		array	0,0	v1.4.0新增
ref.API	方法集

支持所有用法，特殊用法和说明你请看下方 API 和实际使用用例

集成@alifd/next 库的 Dialog、 Button、Message 组件

参数名	说明	类型	备注
onUse	应用按钮点击回调	function	入参：src：裁剪后的图像 URLcoordinates： x：x 坐标 y：y 坐标 w：裁剪宽度 h：裁剪高度
onReset	重置按钮点击回调	function
onCancel	取消按钮或右上角关闭点击回调	function
uploader	用法同上	Uploader	v1.3.0+支持传入 uploader 后，onUse 回调失效，成功或失败逻辑请在 uploader 控件配置中书写

参数名	说明	类型	备注
release	取消框选	function
disable	禁用框选	function
enable	启用框选	function
destroy	销毁框选	function
getBounds	获取真实尺寸	function	返回：w, h
getWidgeSize	获取渲染尺寸	function	返回：w, h
getScaleFactor	获取宽高比例	function	返回：w, h
getCoordinate	获取当前裁剪信息	Function	coordinates： x：x 坐标 y：y 坐标 w：裁剪宽度 h：裁剪高度
reset	重置裁剪信息	function
setImage	设置待裁剪图片	function	入参：string: 图片链接
getImage	获取当前裁剪图片	function	返回：src
getCropStatus	当前裁剪框状态	enum	crop:：裁剪中preview：预览中
setCropStatus	设置裁剪框状态	function	入参同 getCropStatus 返回值
reset	重置裁剪框到初始状态	function
triggerCrop	触发裁剪接口	function	入参：uploadAfterCrop：控制在传入 uploader 时是否触发上传，默认 true
triggerReverseCrop	触发反向裁剪接口	function	同triggerCropv1.4.0新增