ImageCropper 图片裁剪

概述

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

支持平台

App-vue	App-Nvue	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序	H5	PC	快手小程序	钉钉小程序
✓	✓	✓	✓	✓	✓	✓	✓	✓	✓	✓

温馨提示

• Nvue端缩放功能存在性能问题，暂时不支持双指缩放功能，建议在vue页面下使用组件。

• 网络图片确保可以下载，且需为https的链接地址，小程序端还需在后台配置下载域名。

• H5端裁剪后返回的为图片的base64编码。

• 禁止页面回弹效果，pages.json文件中对应页面的style中进行配置。

引入

以下介绍两种常用的引入方式。

第一种：在页面中引用、注册

import fuiImageCropper from "@/components/firstui/fui-image-cropper/fui-image-cropper.vue"
export default {
	components:{
		fuiImageCropper
	}
}

第二种：easycom组件规范

传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。

First UI easycom配置请查看 快速上手。

如果不了解easycom，可先查看 官网文档 (opens new window)。

代码演示

部分示例演示，完整使用请参考示例程序以及文档API（以下示例写于.vue页面中）。

基本使用

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

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

<template>
	<view class="fui-wrap">
		<fui-image-cropper :src="src" ref="cropper"></fui-image-cropper>
		<view class="fui-cropper__tabbar">
			<text class="fui-text" @tap.stop="chooseImage">选择</text>
			<view class="fui-flex__center fui-flex__1" @tap.stop="rotate">
				<fui-icon name="rotate" color="#fff" size="52"></fui-icon>
			</view>
			<text class="fui-text" @tap.stop="cutting">确定</text>
		</view>
	</view>
</template>

export default {
	data() {
		return {
			src: ''
		}
	},
	onLoad(e) {
		if (e.src) {
			this.src = e.src
		}
	},
	methods: {
		chooseImage(e) {
			uni.chooseImage({
				count: 1,
				sizeType: ['original', 'compressed'],
				sourceType: ['album', 'camera'],
				success: res => {
					this.src = res.tempFilePaths[0];
				}
			});
		},
		rotate() {
			this.$refs.cropper && this.$refs.cropper.rotate()
		},
		cutting() {
			if (this.$refs.cropper) {
				this.$refs.cropper.cutting((filPath) => {
					console.log(filPath)
					uni.previewImage({
						urls: [filPath]
					})
				})
			}
		}
	}
}

.fui-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 */
.fui-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 */

.fui-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:裁剪后图片，回调函数中返回

示例预览

示例代码地址

VIP内容代码请查看订单页下载的组件库示例源码。

特别说明

该组件为付费组件，UNI-APP版VIP用户可免费使用 。

开通会员 (opens new window)