@shihuo/image-free-crop-component

图片裁剪组件

Usage no npm install needed!

<script type="module">
  import shihuoImageFreeCropComponent from 'https://cdn.skypack.dev/@shihuo/image-free-crop-component';
</script>

README

图片自由裁剪

@shihuo/image-free-crop-component

图片裁剪组件

API

参数名 说明 必填 类型 默认值 备注
preventMessage 是否阻止弹出内置信息框 boolean false
setSelect 裁剪框配置 Array [0, 0, 400, 400] [x, y, witdh, height]
x：裁剪框起始 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()得到的上传核心
对象，裁剪后直接上传图片
beforeCrop 裁剪触发前触发 function
onSuccess 裁剪成功后触发 function 返参：
image: 裁剪后的图片base64
coordinate： 同getCoordinate返回
onError 裁剪失败触发 function
onComplate 裁剪成功或失败都会触发 function
ref.API 方法集

Dialog 模式

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

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

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

ref.API 方法集

参数名 说明 必填 类型 默认值 备注
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