IBest-UI@HarmonyOS

Appearance

ImageCropper 图片裁剪 ​

介绍 ​

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

引入 ​

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: "重选",
          onClickBtn: () => {
            this.imgList = []
          }
        })
        IBestButton({
          type: "primary",
          text: "获取结果",
          onClickBtn:  () => {
            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: "获取结果",
        onClickBtn: () => {
          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: "获取结果",
        onClickBtn: async () => {
          this.previewUrl = await this.controller.getResult()
          this.showResult()
        }
      })
    }
  }
}

API ​

参数说明类型默认值
componentWidth组件宽度number | string100%
componentHeight组件高度number | string100%
bgColor背景色ResourceColor#000
url需要裁剪的图片路径, 支持 在线图片 base64 file协议 格式。ResourceStr''
shape裁剪形状, 可选值 rect circlestringrect
maskColor蒙层颜色ResourceColorrgba(0,0,0,0.6)
centerWidth裁剪区域宽度或直径number | string60%
centerHeight裁剪区域高度, 仅当 shape 为 rect 时有效number | string60%
showBorder是否显示裁剪区域边框booleantrue
bdColor裁剪区域边框颜色ResourceColor#ebedf0`
maxScale最大缩放比例number2
controller组件实例控制器IBestImageCropperController-

IBestImageCropperController 实例方法 ​

方法名说明参数返回值
getResult获取截取结果callBack?: (result: PixelMap) => voidPromise<PixelMap>