ImageCropper 图片裁剪

提供图片缩放、旋转与裁剪能力，裁剪结果通过回调返回。

支持平台

以下为官网文档所列的平台支持情况，具体功能及版本限制请参见本页的平台说明。

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

基础用法

vue

<template>
  <!-- 图片裁剪区域 -->
  <fui-image-cropper ref="cropperRef" :src="imagePath" />
  <button @click="handleCrop">裁剪</button>
</template>

<script>
export default {
  methods: {
    /** 导出裁剪后的图片 */
    handleCrop() {
      this.$refs.cropperRef.cutting((filePath) => {
        if (filePath) {
          this.imagePath = filePath;
        }
      });
    }
  }
};
</script>

在页面数据中声明 imagePath 并传入可访问的图片地址。

属性

属性	类型	说明	官网默认值
src	String	待裁剪图片地址	-
network	Boolean	是否为网络图片，需确保可下载	false
width	Number / String	裁剪框宽度，单位 px	280
height	Number / String	裁剪框高度，单位 px	280
round	Boolean	是否使用圆形裁剪框，宽高需相等	false
borderColor	String	裁剪框边框色	#B2B2B2
scaleRatio	Number / String	导出图片与裁剪框尺寸比例	2
quality	Number	图片质量，范围 (0, 1]	0.8
fileType	String	导出格式：jpg、png	png
background	String	背景色	rgba(0,0,0,.6)
zIndex	Number / String	层级，nvue 不支持	10
isNav	Boolean	H5 是否使用 uni-app 默认导航栏	false

方法和平台说明

rotate() 每次旋转 90 度；cutting(callback) 通过回调返回裁剪图片路径。nvue 暂不支持圆形裁剪框；H5 网络图片需要满足跨域和下载要求。组件未声明自定义事件。

事件

事件	说明	回调参数
—	无自定义事件	—

插槽

插槽	说明
—	官网未列出该组件的插槽

ImageCropper 图片裁剪 ​

支持平台 ​

基础用法 ​

属性 ​

方法和平台说明 ​

事件 ​

插槽 ​

ImageCropper 图片裁剪

支持平台

基础用法

属性

方法和平台说明

事件

插槽