IBest-UI

Appearance

ImageCropper 图片裁剪 ​

介绍 ​

用于头像截取、图片裁剪。

TIP

阅读该组件文档前请确保已认真阅读快速上手章节的每一个字。

引入 ​

ts
import { IBestImageCropper, IBestImageCropperController } from "@ibestservices/ibest-ui";

代码演示 ​

基础用法 ​

基础用法

TIP

通过传入 url 属性，即可截取图片。

点我查看代码
ts
import { IBestDialogUtil } from "@ibestservices/ibest-ui"
@Entry
@Component
struct DemoPage {
  @State imgList: IBestUploaderFile[] = []
  @State initImg: string = ""
  private controller: IBestImageCropperController = new IBestImageCropperController()
  @State previewUrl: PixelMap | string = ''
  @Builder imgBuilder() {
    Column() {
      Image(this.previewUrl)
        .width(260)
    }
    .padding(30)
  }
  showResult() {
    IBestDialogUtil.open({
      title: "截取结果",
      defaultBuilder: (): void => this.imgBuilder()
    })
  }
  build(){
    Column({ space: 20 }) {
      IBestUploader({
        fileList: $imgList,
        max: 1,
        onChange: (fileList: IBestUploaderFile[]) => {
          this.initImg = fileList[0].previewUri || ""
        }
      })
      IBestImageCropper({
        componentHeight: 300,
        url: this.initImg,
        controller: this.controller
      })
      Row({space: 20}){
        IBestButton({
          text: "重选",
          onBtnClick: () => {
            this.imgList = []
          }
        })
        IBestButton({
          type: "primary",
          text: "获取结果",
          onBtnClick: () => {
            this.controller.getResult().then(res => {
              this.previewUrl = res
              this.showResult()
            })
          }
        })
      }.visibility(this.imgList.length ? Visibility.Visible : Visibility.None)
    }.padding(20).backgroundColor("#fff")
  }
}

在线图片 ​

在线图片

TIP

url 属性支持 在线图片 、base64 、file协议 格式。

点我查看代码
ts
import { IBestDialogUtil } from "@ibestservices/ibest-ui"
@Entry
@Component
struct DemoPage {
  @State initImg: string = "https://img0.baidu.com/it/u=3217812679,2585737758&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
  private controller: IBestImageCropperController = new IBestImageCropperController()
  @State previewUrl: PixelMap | string = ''
  @Builder imgBuilder() {
    Column() {
      Image(this.previewUrl)
        .width(260)
    }
    .padding(30)
  }
  showResult() {
    IBestDialogUtil.open({
      title: "截取结果",
      defaultBuilder: (): void => this.imgBuilder()
    })
  }
  build(){
    Column({ space: 20 }) {
      IBestImageCropper({
        componentHeight: 300,
        url: this.initImg,
        controller: this.controller
      })
      IBestButton({
        type: "primary",
        text: "获取结果",
        onBtnClick: () => {
          this.controller.getResult(res => {
            this.previewUrl = res
            this.showResult()
          })
        }
      })
    }
  }
}

其他操作 ​

其他操作

点我查看代码
ts
import { IBestDialogUtil } from "@ibestservices/ibest-ui"
@Entry
@Component
struct DemoPage {
  @State initImg: string = "https://img1.baidu.com/it/u=404530833,1472694862&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=800"
  @State curScale: number = 1
  @State enableRotate: boolean = false
  @State curAngle: number = 0
  private controller: IBestImageCropperController = new IBestImageCropperController()
  @State previewUrl: PixelMap | string = ''
  @Builder imgBuilder() {
    Column() {
      Image(this.previewUrl)
        .width(260)
    }
    .padding(30)
  }
  showResult() {
    IBestDialogUtil.open({
      title: "截取结果",
      defaultBuilder: (): void => this.imgBuilder()
    })
  }
  build(){
    Column({ space: 20 }) {
      IBestImageCropper({
        componentHeight: 500,
        url: this.initImg,
        centerWidth: 260,
        centerHeight: 260,
        maxScale: 3,
        enableRotate: this.enableRotate,
        maxAngle: 45,
        controller: this.controller
      })
      Row({ space: 14 }){
        Text("缩放比例")
        Row(){
          IBestSlider({
            value: $curScale,
            min: 1,
            max: 3,
            step: 0.01,
            onChange: (value) => {
              this.controller.setScale(value as number)
            }
          })
        }.layoutWeight(1)
      }
      Row({ space: 14 }){
        Text("开启旋转")
        IBestSwitch({
          value: $enableRotate,
          onChange: () => {
            this.curAngle = 0
          }
        })
      }.width("100%")
      Row({ space: 14 }){
        Text("旋转角度")
        Row() {
          IBestSlider({
            value: $curAngle,
            min: -45,
            max: 45,
            step: 1,
            onChange: (value) => {
              this.controller.setAngle(value as number)
            }
          })
        }.layoutWeight(1)
      }
      .visibility(this.enableRotate ? Visibility.Visible : Visibility.None)
      IBestButton({
        type: "primary",
        text: "获取结果",
        onBtnClick: () => {
          this.controller.getResult(res => {
            this.previewUrl = res
            this.showResult()
          })
        }
      })
    }
  }
}

自定义样式 ​

自定义样式

点我查看代码
ts
import { IBestDialogUtil } from "@ibestservices/ibest-ui"
@Entry
@Component
struct DemoPage {
  @State initImg: ResourceStr = $r("app.media.01")  // 此处替换为自己项目本地图片
  private controller: IBestImageCropperController = new IBestImageCropperController()
  @State previewUrl: PixelMap | string = ''
  @Builder imgBuilder() {
    Column() {
      Image(this.previewUrl)
        .width(260)
    }
    .padding(30)
  }
  showResult() {
    IBestDialogUtil.open({
      title: "截取结果",
      defaultBuilder: (): void => this.imgBuilder()
    })
  }
  build(){
    Column({ space: 20 }) {
      IBestImageCropper({
        componentHeight: 500,
        url: this.initImg,
        controller: this.controller,
        shape: 'circle',
        centerWidth: 260
      })
      IBestButton({
        type: "primary",
        text: "获取结果",
        onBtnClick: async () => {
          this.previewUrl = await this.controller.getResult()
          this.showResult()
        }
      })
    }
  }
}

API ​

@Props ​

参数说明类型默认值
componentWidth组件宽度string | number100%
componentHeight组件高度string | number100%
bgColor背景色ResourceColor#000
url需要裁剪的图片路径, 支持 在线图片 base64 file协议 格式。ResourceStr''
shape裁剪形状, 可选值 rect circlestringrect
maskColor蒙层颜色ResourceColorrgba(0,0,0,0.6)
centerWidth裁剪区域宽度或直径string | number60%
centerHeight裁剪区域高度, 仅当 shape 为 rect 时有效string | number60%
showBorder是否显示裁剪区域边框booleantrue
bdColor裁剪区域边框颜色ResourceColor#ebedf0`
maxScale最大缩放比例number2
controller组件实例控制器IBestImageCropperController-
enableRotate 2.1.8是否开启旋转, 开启后不可移动booleanfalse
maxAngle 2.1.8旋转最大角度, 默认180°, 即顺时针最大180°, 逆时针最大180°number180

IBestImageCropperController 实例方法 ​

方法名说明参数返回值
getResult获取截取结果callBack?: (result: PixelMap) => voidPromise<PixelMap>
setScale 2.1.8设置缩放比例scale: numbervoid
setAngle 2.1.8设置旋转角度angle: numbervoid
reset 2.1.8重置-void