读取相册图片添加到list 中

@Entry

@Component

struct ListExample {

  @State arr: ImageBean [] = []

  @State editFlag: boolean = false

  private scroller: ListScroller = new ListScroller()

  build() {

    Stack({ alignContent: Alignment.TopStart }) {

      Column() {

        List({ space: 20, initialIndex: 0, scroller: this.scroller }) {

          ForEach(this.arr, (item: number, index: number) => {

            ListItem() {

              Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) {

                Stack() {

                  Image(this.arr[index].img)

                    .objectFit(ImageFit.Contain)

                    .width('100%')

                    .height('100%')

                    .draggable(false)

                  Column() {

                    Progress({ value: 90, total: 100, type: ProgressType.Ring })

                      .width(40)

                      .height(40)

                      .color(Color.Grey)

                      .style({ strokeWidth: 5 })

                  }

                  .width('100%')

                  .height('100%')

                  .backgroundColor('rgba(0,0,0,0.5)')

                  .justifyContent(FlexAlign.Center)

                }

                .width(this.arr[index].width)

                .height(this.arr[index].height)

                .borderRadius(11)

                .constraintSize({

                  maxWidth: 140,

                  maxHeight: 140

                })

              }

            }

          }, (item: string) => item)

        }.width('90%')

        .scrollBar(BarState.Off)

        .friction(0.6)

      }.width('100%')

      Button('edit list')

        .onClick(() => {

          this.getPictureFromAlbum()

        }).margin({ top: 5, left: 20 })

    }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 })

  }

  async getPictureFromAlbum() {

    // 拉起相册,选择图片

    let PhotoSelectOptions = new photoAccessHelper.PhotoSelectOptions();

    PhotoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE;

    PhotoSelectOptions.maxSelectNumber = 1;

    let photoPicker = new photoAccessHelper.PhotoViewPicker();

    let photoSelectResult: photoAccessHelper.PhotoSelectResult = await photoPicker.select(PhotoSelectOptions);

    let albumPath = photoSelectResult.photoUris[0];

    // 读取图片为buffer

    const file = fs.openSync(albumPath, fs.OpenMode.READ_ONLY);

    let photoSize = fs.statSync(file.fd).size;

    console.info('Photo Size: ' + photoSize);

    let buffer = new ArrayBuffer(photoSize);

    fs.readSync(file.fd, buffer);

    fs.closeSync(file);

    // 解码成PixelMap

    const imageSource = image.createImageSource(buffer);

    const imageInfo = imageSource.getImageInfoSync(0)

    let bean = new ImageBean()

    if (imageInfo.size.width > 140 || imageInfo.size.height > 140) {

      let num = 140 / Math.max(imageInfo.size.width, imageInfo.size.height)

      bean.width = imageInfo.size.width * num

      bean.height = imageInfo.size.height * num

    }

    console.log('imageSource: ' + JSON.stringify(imageSource));

    bean.img = imageSource.createPixelMapSync({})

    this.arr.push(bean)

    this.scroller.scrollToIndex(this.arr.length - 1)

  }

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值