鸿蒙：将Resource类型的image转成 image.PixelMap 类型

《博客目录》

[1. 博客前言](#1. 博客前言)

[2. 参考链接](#2. 参考链接)

[3. 核心代码](#3. 核心代码)

[4. 运行效果](#4. 运行效果)

[5. 完整代码](#5. 完整代码)

---

1. 前言

有些时候，我们使用某些显示图片的组件时，发现只能填入image.PixelMap格式的图片，此时，我们需要转换类型。本篇博客，分享Resource 类型如何转换成image.PixelMap 类型（或获取Resource图片的PixelMap）。

2. 参考链接

https://developer.huawei.com/consumer/cn/forum/topic/0203192799649268451?fid=0109140870620153026https://developer.huawei.com/consumer/cn/forum/topic/0203192799649268451?fid=0109140870620153026

https://developer.huawei.com/consumer/cn/doc/harmonyos-faqs/faqs-image-6https://developer.huawei.com/consumer/cn/doc/harmonyos-faqs/faqs-image-6

3. 核心代码

getImagePixelMap1() {
  // 获取 resourceManager
  let resManager = this.getUIContext().getHostContext()?.resourceManager;
  // 通过资源ID获取 DrawableDescriptor
  let drawableDesc: DrawableDescriptor =
    resManager?.getDrawableDescriptor($r('app.media.huawei').id) as DrawableDescriptor;
  // 获取 PixelMap
  this.pixelMap = drawableDesc?.getPixelMap();
}

async getPixelMapFromResource(context: Context) {
  // 1. 获取 resourceManager
  const resourceMgr = context.resourceManager;
  // 2. 获取媒体内容的 ArrayBuffer
  const fileData = await resourceMgr.getMediaContent($r('app.media.pingguo').id);
  const buffer = fileData.buffer;
  // 3. 创建 ImageSource 并解码为 PixelMap
  const imageSource = image.createImageSource(buffer);
  this.pixelMap2 = await imageSource.createPixelMap();

}

getPixelMap3() {
  try {
    let uris: Array<string> = [];
    let PhotoSelectOptions = new photoAccessHelper.PhotoSelectOptions();
    PhotoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE;
    PhotoSelectOptions.maxSelectNumber = 1;
    let photoPicker = new photoAccessHelper.PhotoViewPicker();
    photoPicker.select(PhotoSelectOptions).then((PhotoSelectResult: photoAccessHelper.PhotoSelectResult) => {
      console.info('photoPicker.select successfully, PhotoSelectResult uri: ' +
      JSON.stringify(PhotoSelectResult));
      uris = PhotoSelectResult.photoUris;
      let phAccessHelper =
        photoAccessHelper.getPhotoAccessHelper(this.getUIContext().getHostContext() as Context);
      let predicates: dataSharePredicates.DataSharePredicates = new dataSharePredicates.DataSharePredicates();
      // Configure query conditions, use PhotoViewPicker to select the URI of the image to be queried
      predicates.equalTo('uri', uris[0]);
      let fetchOptions: photoAccessHelper.FetchOptions = {
        fetchColumns: [],
        predicates: predicates
      };
      phAccessHelper.getAssets(fetchOptions, async (err, fetchResult) => {
        if (fetchResult !== undefined) {
          console.info('fetchResult success');
          let photoAsset: photoAccessHelper.PhotoAsset = await fetchResult.getFirstObject();
          if (photoAsset !== undefined) {
            // Get Thumbnail
            photoAsset.getThumbnail((err, pixelMap) => {
              if (err == undefined) {
                this.pixelMap3 = pixelMap;
                console.info('getThumbnail successful ' + JSON.stringify(pixelMap));
              } else {
                console.error('getThumbnail fail', err);
              }
            });
            console.info('photoAsset.displayName : ' + photoAsset.displayName);
          }
        } else {
          console.error(`fetchResult fail with error: ${err.code}, ${err.message}`);
        }
      });
    }).catch((err: BusinessError) => {
      console.error('photoPicker.select failed with err: ' + JSON.stringify(err));
    });
  } catch (error) {
    let err: BusinessError = error as BusinessError;
    console.error('photoPicker failed with err: ' + JSON.stringify(err));
  }
}

4. 运行效果

5. 完整代码

Index.ets

import { image } from '@kit.ImageKit';
import { photoAccessHelper } from '@kit.MediaLibraryKit';
import { dataSharePredicates } from '@kit.ArkData';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@ComponentV2
struct Index {
  @Local pixelMap: image.PixelMap | undefined = undefined;
  @Local pixelMap2: image.PixelMap | undefined = undefined;
  @Local pixelMap3: image.PixelMap | undefined = undefined;

  getImagePixelMap1() {
    // 获取 resourceManager
    let resManager = this.getUIContext().getHostContext()?.resourceManager;
    // 通过资源ID获取 DrawableDescriptor
    let drawableDesc: DrawableDescriptor =
      resManager?.getDrawableDescriptor($r('app.media.huawei').id) as DrawableDescriptor;
    // 获取 PixelMap
    this.pixelMap = drawableDesc?.getPixelMap();
  }

  async getPixelMapFromResource(context: Context) {
    // 1. 获取 resourceManager
    const resourceMgr = context.resourceManager;
    // 2. 获取媒体内容的 ArrayBuffer
    const fileData = await resourceMgr.getMediaContent($r('app.media.pingguo').id);
    const buffer = fileData.buffer;
    // 3. 创建 ImageSource 并解码为 PixelMap
    const imageSource = image.createImageSource(buffer);
    this.pixelMap2 = await imageSource.createPixelMap();

  }

  getPixelMap3() {
    try {
      let uris: Array<string> = [];
      let PhotoSelectOptions = new photoAccessHelper.PhotoSelectOptions();
      PhotoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE;
      PhotoSelectOptions.maxSelectNumber = 1;
      let photoPicker = new photoAccessHelper.PhotoViewPicker();
      photoPicker.select(PhotoSelectOptions).then((PhotoSelectResult: photoAccessHelper.PhotoSelectResult) => {
        console.info('photoPicker.select successfully, PhotoSelectResult uri: ' +
        JSON.stringify(PhotoSelectResult));
        uris = PhotoSelectResult.photoUris;
        let phAccessHelper =
          photoAccessHelper.getPhotoAccessHelper(this.getUIContext().getHostContext() as Context);
        let predicates: dataSharePredicates.DataSharePredicates = new dataSharePredicates.DataSharePredicates();
        // Configure query conditions, use PhotoViewPicker to select the URI of the image to be queried
        predicates.equalTo('uri', uris[0]);
        let fetchOptions: photoAccessHelper.FetchOptions = {
          fetchColumns: [],
          predicates: predicates
        };
        phAccessHelper.getAssets(fetchOptions, async (err, fetchResult) => {
          if (fetchResult !== undefined) {
            console.info('fetchResult success');
            let photoAsset: photoAccessHelper.PhotoAsset = await fetchResult.getFirstObject();
            if (photoAsset !== undefined) {
              // Get Thumbnail
              photoAsset.getThumbnail((err, pixelMap) => {
                if (err == undefined) {
                  this.pixelMap3 = pixelMap;
                  console.info('getThumbnail successful ' + JSON.stringify(pixelMap));
                } else {
                  console.error('getThumbnail fail', err);
                }
              });
              console.info('photoAsset.displayName : ' + photoAsset.displayName);
            }
          } else {
            console.error(`fetchResult fail with error: ${err.code}, ${err.message}`);
          }
        });
      }).catch((err: BusinessError) => {
        console.error('photoPicker.select failed with err: ' + JSON.stringify(err));
      });
    } catch (error) {
      let err: BusinessError = error as BusinessError;
      console.error('photoPicker failed with err: ' + JSON.stringify(err));
    }
  }

  aboutToAppear(): void {
    this.getImagePixelMap1();
    this.getPixelMapFromResource(this.getUIContext().getHostContext() as Context);
  }

  build() {

    Column({ space: 80 }) {
      Column({ space: 20 }) {
        Text("方式一： DrawableDescriptor ")
          .fontWeight(FontWeight.Medium)
          .fontSize(20)
        Image(this.pixelMap)
          .width(350)
      }

      Column({ space: 20 }) {
        Text("方式二： resourceManager.getMediaContent ")
          .fontWeight(FontWeight.Medium)
          .fontSize(20)
        Image(this.pixelMap2)
          .width(100)
      }

      Column({ space: 20 }) {
        Text("方式三： getThumbnail ")
          .fontWeight(FontWeight.Medium)
          .fontSize(20)
        Button("获取位图")
          .onClick(() => {
            this.getPixelMap3()

          })
        Image(this.pixelMap3)
          .width(100)
      }

    }

    .width
    ("100%")
    .height
    ("100%")
    .justifyContent
    (FlexAlign.Center)
  }
}

觉得有帮助，可以点赞或收藏