更新记录

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背景样式，所以请给每个元素一个背景色吧。

参数

事件

备注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);
    }
}