You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
4.2 KiB
4.2 KiB
【注意】由于赶时间，只做了功能性测试，兼容性测试暂时无法进行，更不用说优化测试了。欢迎有遇到问题的留言，或者自己动手修改也可以。
【注意】因为属于业余时间开发的一个项目所依赖的插件，所以更新较缓慢。
使用方式
import Cropper from '@/components/cropper/cropper.vue';
<cropper :imagePath="originalFaceSrc" :aspectRatio="1" @complete="complete" @cancel="cancel" v-if="handleFaceStatus"></cropper>
使用v-if控制显示，mounted内执行init方法，使用简单，操作便利。
参数
| 参数 | 类型 | 解释 | 默认 | 必填 | 备注 |
|---|---|---|---|---|---|
| quality | Number | 返回图片质量 | 1 | 否 | 如返回的图片仅需预览不用上传，请适当调低 |
| imagePath | String | 原始图片路径 | "" | 是 | blob、静态图片资源地址或者base64（未测试） |
| outputFileType | String | 目标文件的类型 | jpg | 否 | jpg：输出jpg格式图片；png：输出png格式图片 |
| aspectRatio | Number, null | 目标图片的宽高比 | null | 否 | null，即不限制剪裁宽高比。aspectRatio需大于0 |
| minBoxWidthRatio | Number | 最小剪裁尺寸与原图尺寸的比率（宽） | 0.15 | 否 | 宽度最小剪裁到原图的0.15宽 |
| minBoxHeightRatio | Number | 最小剪裁尺寸与原图尺寸的比率（高） | 0.15 | 否 | 当设置aspectRatio时，minBoxHeight值设置无效。minBoxHeight值由minBoxWidth 和 aspectRatio自动计算得到 |
| initialBoxWidthRatio | Number | 剪裁框初始大小比率（宽） | 0.8 | 否 | 裁框默认宽度为图片宽度的0.8倍 |
| initialBoxHeightRatio | Number | 剪裁框初始大小比率（高） | 0.8 | 否 | 当设置aspectRatio时，initialBoxHeightRatio值设置无效。initialBoxHeightRatio值由initialBoxWidthRatio 和 aspectRatio自动计算得到 |
| saveMode | String | 保存模式 | "None" | 否 | None（无限制）ScaleTo500(缩放到指定的尺寸 如 500宽度) Max500(不超过500宽度) |
事件
| 事件名 | 解释 | 参数 | 备注 |
|---|---|---|---|
| reset | 用户点击重做后触发 | 无 | 可能无用，但留一个给开发者备用 |
| cancel | 用户点击取消后触发 | 无 | 开发者可以将组件置为消失v-if（尽量不要用v-show） |
| complete | 用户点击裁剪后触发 | path：路径，h5为base64，app与小程序为临时路径；param：裁切参数，见【备注1】 | 核心功能 |
备注1
param：
｛
x:Number, //裁切左上角X坐标
y:Number, //裁切左上角Y坐标
width:Number, //裁切宽度
height:Number, //裁切高度
rotate:Number, //旋转（未实现，预留）
scaleX:Number, //X轴缩放（未实现，预留）
scaleY:Number, //Y轴缩放（未实现，预留）
｝
备注2
本组件样式支持iphone安全范围但需要手动开启 请在插件被样式中最后备注的地方解除备注即可。 控制台会报错，无视即可。 或者复制如下样式样式代码
// 安全域兼容样式
page {
--safe-area-inset-top: 0px;
--safe-area-inset-right: 0px;
--safe-area-inset-bottom: 0px;
--safe-area-inset-left: 0px;
@supports (top: constant(safe-area-inset-top)) {
--safe-area-inset-top: constant(safe-area-inset-top);
--safe-area-inset-right: constant(safe-area-inset-right);
--safe-area-inset-bottom: constant(safe-area-inset-bottom);
--safe-area-inset-left: constant(safe-area-inset-left);
}
@supports (top: env(safe-area-inset-top)) {
--safe-area-inset-top: env(safe-area-inset-top);
--safe-area-inset-right: env(safe-area-inset-right);
//--safe-area-inset-bottom: 12px;
--safe-area-inset-bottom: env(safe-area-inset-bottom);
--safe-area-inset-left: env(safe-area-inset-left);
}
}