ImageCropper 图片裁剪，将图片按照预先设置裁剪比例进行裁剪。

支持平台

App（vue）	App（nvue）	H5	小程序
✓	✓	✓	✓

基本使用

通过 src 属性设置需要裁剪的图片。

通过 ref 属性来注册组件引用信息。注册完成后，我们可以通过this.$refs.XXX访问到对应的组件实例，并调用上面的实例方法。

<template>
	<view class="wui-wrap">
        <wui-image-cropper :src="srcUrl" ref="cropperRef"></wui-image-cropper>
        <view class="wui-cropper__tabbar">
            <text class="wui-text" @tap.stop="chooseImage">选择</text>
            <view class="flex items-center flex-1 flex-col" @tap.stop="rotate">
                <wui-icon name="w-rotate" color="#fff" size="52"></wui-icon>
            </view>
            <text class="wui-text" @tap.stop="cutting">确定</text>
        </view>
    </view>
</template>

 const srcUrl = ref<any>('');
  const urls = ref<any>('');
  const show = ref<any>(false);
  onLoad((options: any) => {
    console.log('aaaaa', options);
    if (options.src) {
      srcUrl.value = options.src;
    }
  });
  const hideGallery = () => {
    show.value = false;
  };
  const chooseImage = () => {
    uni.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success: res => {
        srcUrl.value = res.tempFilePaths[0];
      },
    });
  };
  const cropperRef = ref<any>('');
  const rotate = () => {
    cropperRef.value.rotate();
  };
  const cutting = () => {
    if (cropperRef.value) {
      cropperRef.value.cutting(filePath => {
        console.log(filePath);
        // #ifndef MP-BAIDU
        uni.previewImage({
          urls: [filePath],
        });
        // #endif

        // #ifdef MP-BAIDU
        urls.value = [filePath];
        setTimeout(() => {
          show.value = true;
        }, 50);
        // #endif
      });
    }
  };

.wui-cropper__tabbar {
	/* #ifndef APP-NVUE */
	display: flex;
	z-index: 20;
	position: relative;
	/* #endif */
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	position: fixed;
	height: 120rpx;
	left: 0;
	right: 0;
	bottom: 0;
	/* #ifdef APP-NVUE */
	border-top: 0.5px solid #666;
	/* #endif */
}

/* #ifndef APP-NVUE */
.wui-cropper__tabbar::before {
	content: ' ';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	border-top: 1px solid #666;
	transform: scaleY(0.5);
	transform-origin: 0 0;
	z-index: 21;
}

/* #endif */

.wui-text {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	font-size: 32rpx;
	font-weight: normal;
	color: #fff;
	flex: 1;
	text-align: center;
	justify-content: center;
	align-items: center;
	height: 80rpx;
	line-height: 80rpx;
	/* #ifdef H5 */
	cursor: pointer;
	/* #endif */
}

Slots

插槽名称	说明
-	-

Props

属性名	类型	说明	默认值	平台差异说明
src	String	需要裁剪的图片地址	-	-
network	Boolean	是否为网络图片，如果为网络图片需保证可以正常下载，切勿使用第三方图片	false	-
width	Number, String	裁剪框宽度，单位px	280	-
height	Number, String	裁剪框高度，单位px	280	-
round	Boolean	是否为圆形裁剪框，需要将宽高设置一致	false	Nvue端暂不支持设置为圆形裁剪框
borderColor	String	裁剪框边框颜色	#B2B2B2	-
scaleRatio	Number, String	生成的图片尺寸相对剪裁框的比例，值越大图片越大	2	-
quality	Number	图片的质量，取值范围为 (0, 1]，不在范围内时当作1.0处理	0.8	-
fileType	String	裁剪后的图片类型，可选值：jpg/png	png	-

Events

事件名	说明	回调参数
-	-	-

Methods

通过ref属性来注册组件引用信息。注册完成后，我们可以通过this.$refs.XXX访问到对应的组件实例，并调用上面的实例方法。

方法名	说明	传入参数	回调参数
rotate	旋转图片，目前仅支持90deg+旋转	-	-
cutting	裁剪图片，调用方法返回裁剪图	callback	filPath:裁剪后图片，回调函数中返回