基于ArkTS语言的OpenHarmony APP应用开发：图片处理 原创

function TextArea(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: TextAreaController})
1.

import mediaquery from '@ohos.mediaquery'
1.

function matchMediaSync(condition: string): MediaQueryListener
1.

function on(type: 'change', callback: Callback<MediaQueryResult>): void
1.

function off(type: 'change', callback?: Callback<MediaQueryResult>): void
1.

"requestPermissions": [
  {
    "name": "ohos.permission.READ_MEDIA",
    "reason": "$string:media_read_permission",
    "usedScene": {
      "abilities": [
        "MainAbility"
      ],
      "when": "inuse"
    }
  },
  {
    "name": "ohos.permission.WRITE_MEDIA",
    "reason": "$string:media_write_permission",
    "usedScene": {
      "abilities": [
        "MainAbility"
      ],
      "when": "inuse"
    }
  },
  {
    "name": "ohos.permission.MEDIA_LOCATION",
    "reason": "$string:media_location_permission",
    "usedScene": {
      "abilities": [
        "MainAbility"
      ],
      "when": "inuse"
    }
  }
]
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.

@StorageLink('pixelMaps') pixelMaps: Array<image.PixelMap> = []
1.

aboutToAppear() {
  logger.info(TAG, 'enter aboutToAppear')
  // 与AppStorage建立双向数据绑定，获取pixelMaps属性
  if (AppStorage.Get('pixelMaps')) {
    this.pixelMaps.push(undefined)
  }
  // 获取发起跳转的页面往当前页传入的参数
  if (router.getParams() && router.getParams()['isShowCamera']) {
    this.isShowCamera = true
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

// 使用网格容器将已选照片显示出现
Grid() {
  // 轮流显示成1行照片
  ForEach(this.pixelMaps, (item, index) => {
    GridItem() {
      if (index < this.pixelMaps.length - 1) {
        Image(item)
          .width('100%')
          .height(100)
          .borderRadius(10)

      } else {
        // 最后一个为"添加图片/照片"
        Column() {
          Image($r('app.media.photo'))
            .height(40)
            .width(40)
            .onClick(() => {
              router.push({
                url: 'pages/ChoicePhotos'
              })
            })
          Text($r('app.string.add_picture'))
            .fontSize(13)
        }
        .alignItems(HorizontalAlign.Center)
        .justifyContent(FlexAlign.Center)
        .width('100%')
        .height(100)
        .borderRadius(10)
        .backgroundColor('#F1F3F5')
      }
    }
  })
}
.columnsTemplate('1fr 1fr 1fr 1fr')
.columnsGap(8)
.rowsGap(8)
.margin({ top: 8 })
.width('94%')
.height(105 * (this.pixelMaps.length > 4 ? 2 : 1))
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.

@Entry @Component struct ChoicePhotos {
  build() {
    Column() {
      ChoicePhoto()
    }
  }
}
1.
2.
3.
4.
5.
6.
7.

private mediaLibraryInstance: mediaLibrary.MediaLibrary = mediaLibrary.getMediaLibrary(getContext(this) as any)
private listener = mediaQuery.matchMediaSync('screen and (min-aspect-ratio: 1.5) or (orientation: landscape)')
1.
2.

async aboutToAppear() {
  logger.info(TAG, `aboutToAppear`)
  this.listener.on('change', this.onLand)
  this.nextText = await this.convertResourceToString($r('app.string.next'))
  // 获取图片的文件信息
  this.getFileAssetsFromType(mediaLibrary.MediaType.IMAGE)
}
1.
2.
3.
4.
5.
6.
7.

async getFileAssetsFromType(mediaType: mediaLibrary.MediaType) {
    logger.info(TAG, `getFileAssetsFromType`)
    let context = getContext(this) as any
    // 获取媒体库的实例，用于访问和修改用户等个人媒体数据信息（如音频、视频、图片、文档等）
    let mediaLibraryInstance = mediaLibrary.getMediaLibrary(context)
    if (!mediaLibraryInstance) {
      return
    }
    logger.info(TAG, `mediaLibraryInstance = ${JSON.stringify(mediaLibraryInstance)}`)
    // 创建文件获取选项，此处参数为获取image类型的文件资源
    let fileKeyObj = mediaLibrary.FileKey
    let fetchOp = {
      selections: `${fileKeyObj.MEDIA_TYPE}=?`,
      selectionArgs: [`${mediaType}`],
    }
    // 获取文件资源
    let fetchFileResult = await mediaLibraryInstance.getFileAssets(fetchOp)
    logger.info(TAG, `fetchFileResult = ${JSON.stringify(fetchFileResult)} , ${fetchFileResult.getCount()}`)
    if (fetchFileResult && fetchFileResult.getCount() > 0) {
      this.medias = await fetchFileResult.getAllObject()
    }
    logger.info(TAG, `this.medias = ${JSON.stringify(this.medias)}`)
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.

Grid() {
  ForEach(this.medias, (item, index) => {
    GridItem() {
      Stack({ alignContent: Alignment.TopEnd }) {
        Image(item.uri)
          .width('100%')
          .height('100%')
          .borderRadius(10)
          .objectFit(ImageFit.Fill)

        if (this.isShowChoices[index]) {
          this.showChoiceBuild('#e92f4f', this.choiceMedias.indexOf(item) + 1)
        } else {
          this.showChoiceBuild('#ffb7b4b4', 0)
        }
      }
      .width('100%')
      .height('100%')
      .onClick(() => {
        this.isShowChoices[index] = !this.isShowChoices[index]
        if (this.isShowChoices[index]) {
          if (this.choiceMedias.length > 5) {
            prompt.showDialog({ message: $r('app.string.choice_number') })
            this.isShowChoices[index] = !this.isShowChoices[index]
            return
          }
          this.choiceMedias.push(item)
        } else {
          if (this.choiceMedias.indexOf(item) != -1) {
            this.choiceMedias.splice(this.choiceMedias.indexOf(item), 1)
          }
        }
      })
    }
    .aspectRatio(1)
  })
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.

Button(`${this.nextText} ${this.isChoice === true ? `(${this.choiceMedias.length})` : ''}`)
  .fontSize(20)
  .height(32)
  .backgroundColor(this.isChoice === true ? '#E92F4F' : '#fffa8e8e')
  .margin({ right: 10 })
  .borderRadius(20)
  .onClick(() => {
    if (this.isChoice === false) {
      return
    }
    this.mediaUris = this.choiceMedias.map((item) => {
      return item.uri
    })
    // 跳转到图片编辑页面
    router.push({
      url: 'pages/EditPages',
      params: { mediaUris: this.mediaUris, isLand: this.isLand }
    })
  })
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.