更新记录

1.3(2020-04-05)

修改了启动方式,回调方法增加原地址

1.1(2019-10-19)

2019年10月19日 下午 由于插件市场的相关插件满足不了我的需求,于是自己动手 1、支持约束比例,既1/1,1/2等; 2、裁剪后,返回裁剪参数和path(h5为base64,app和小程序为临时路径); 3、允许返回的path设置质量,考虑上传携带裁剪参数和图片给后端,path只是个预览,避免挤占性能,所以可以设定预览质量 4、包含“重做”功能

查看更多

【感谢】你们的留言我都看到了,只是接了一个比较大的项目,导致依赖本插件的项目被鸽了,直到现在使用到了本插件我才重新修改。

【注意】由于赶时间,只做了功能性测试,兼容性测试暂时无法进行,更不用说优化测试了。欢迎有遇到问题的留言,或者自己动手修改也可以。【emm】

【注意】如果一些顺利,我会在本项目继续使用这个插件。

【更新】虽然使用了非canvas,在渲染速度上快了很多,但是因为uni或者说小程序框架限制,导致了渲染总是慢那么点。尝试用wxs解决,但是没有研究会。后续在继续研究。

最后感谢大家的支持

使用方式

import Cropper from '@/components/cropper/cropper.vue';
<cropper ref="cropper" :aspectRatio="1" @complete="complete" @cancel="cancel" ></cropper>

直接使用

this.$refs.cropper.init(originalFaceSrc);
//originalFaceSrc原始图片路径。

关闭使用

this.$refs.cropper.close(Boolean);
// Boolean为是否清空原始图片路径默认true,这里主要考虑如果是相同图片,或许可以节约一点时间。
// 但是实际上不明显【没有实现】,后续更新会决定是否保留这个参数。

因为默认是放在最底层,即z-index:-999999,但是会覆盖默认的page背景样式,所以请给每个元素一个背景色吧。

参数

参数 类型 解释 默认 必填 备注
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自动计算得到

事件

事件名 解释 参数 备注
reset 用户点击重做后触发 可能无用,但留一个给开发者备用
cancel 用户点击取消后触发 开发者可以使用close()方法控制关闭
complete 用户点击裁剪后触发 source:原始图片路径,因为不再通过v-if控制,返回原始图片便于使用;
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)) {
    page {
        --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)) {
    page {
        --safe-area-inset-top: env(safe-area-inset-top);
        --safe-area-inset-right: env(safe-area-inset-right);
        --safe-area-inset-bottom: env(safe-area-inset-bottom);
        --safe-area-inset-left: env(safe-area-inset-left);
    }
}

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问