HarmonyOS 如何获取已经下载图片的PixelMap？

Question

Image组件在加载网络图片并成功显示后，如何获取已经下载图片的 PixelMap？

Answer 1

可参考示例Demo

import image from '@ohos.multimedia.image';
import picker from '@ohos.file.picker';
import fs from '@ohos.file.fs';
import common from '@ohos.app.ability.common';
import mediaLibrary from '@ohos.multimedia.mediaLibrary';

// 打包 PixelMap 为 jpg 格式
async function packingPixelMap2Jpg(pixelMap: PixelMap): Promise<ArrayBuffer> {
  // 创建ImagePacker实例
  const imagePackerApi = image.createImagePacker();
  // 设置打包参数
  // format：图片打包格式，只支持 jpg 和 webp
  // quality：JPEG 编码输出图片质量
  // bufferSize：图片大小，默认 10M
  const packOpts: image.PackingOption = { format: "image/jpeg", quality: 98 };
  let imageBuffer: ArrayBuffer;
  try {
    // 图片压缩或重新打包
    imageBuffer = await imagePackerApi.packing(pixelMap, packOpts);
  } catch (err) {
    console.error(Invoke packingPixelMap2Jpg failed, err: ${JSON.stringify(err)});
  }
  return imageBuffer;
}
async function getMediaUriByFilePickerSave(): Promise<string> {
  let mediaUri: string;
  try {
    const PhotoSaveOptions = new picker.PhotoSaveOptions();
    PhotoSaveOptions.newFileNames = [IMG_${getTimeStringInYYMMDD_HHMMSS()}.jpg];
    const photoPicker = new picker.PhotoViewPicker();
    const photoSaveResult = await photoPicker.save(PhotoSaveOptions)
    mediaUri = photoSaveResult[0];
  } catch (err) {
    console.error(Invoke photoPicker.save failed, err: ${JSON.stringify(err)});
  }
  return mediaUri;
}
// 保存图片 ArrayBuffer 二进制数据至媒体库
async function saveArrayBuffer2MediaLibrary(context: common.Context, buffer: ArrayBuffer): Promise<void> {
  // 获取媒体库的实例及创建媒体资源所需参数
  const media = mediaLibrary.getMediaLibrary(context);
  const DIR_IMAGE = mediaLibrary.DirectoryType.DIR_IMAGE;
  const mediaType = mediaLibrary.MediaType.IMAGE;
  try {
    // 获取图片公共目录路径
    const imagePath = await media.getPublicDirectory(DIR_IMAGE);
    // 在 /Picture 目录下创建图片文件，命名为 'IMG_YYMMDD_HHMMSS.jpg'
    const imageFileAsset = await media.createAsset(mediaType, IMG_${getTimeStringInYYMMDD_HHMMSS()}.jpg, imagePath);
    const imageFileAssetFd = await imageFileAsset.open('rw');
    // 将二进制数据写入创建的图片文件
    fs.writeSync(imageFileAssetFd, buffer);
    await imageFileAsset.close(imageFileAssetFd);
  } catch (err) {
    console.error(Invoke saveArrayBuffer2MediaLibrary failed, err: ${JSON.stringify(err)});
  }
}
function saveArrayBuffer2File(buffer: ArrayBuffer, uri: string) {
  try {
    const file = fs.openSync(uri, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE);
    fs.writeSync(file.fd, buffer);
    fs.closeSync(file);
  }
  catch (err) {
    console.error(Invoke copyFile failed, err: ${JSON.stringify(err)});
  }
}
// 获取两位字符串
function get2DigitStr(num: number): string {
  let numStr = num.toString();
  const numStrLen = numStr.length;
  if (numStrLen === 1) {
    numStr = 0${numStr};
  } else {
    numStr = numStr.substring(numStrLen - 2, numStrLen)
  }
  return numStr;
}
// 获取 'YYMMDD_HHMMSS' 格式的时间戳
function getTimeStringInYYMMDD_HHMMSS(): string {
  const curDate = new Date();
  let year = curDate.getFullYear();
  let mouth = get2DigitStr(curDate.getMonth() + 1);
  let date = get2DigitStr(curDate.getDate());
  let hours = get2DigitStr(curDate.getHours());
  let minutes = get2DigitStr(curDate.getMinutes());
  let seconds = get2DigitStr(curDate.getSeconds());
  return ${year}${mouth}${date}_${hours}${minutes}${seconds}
}
// 通过 uri 解析图片位 PixelMap
export async function getPixelMapByImageUri(uri: string): Promise<image.PixelMap> {
  // 通过 uri 应用沙箱路径创建 ImageSource
  // 当前支持格式有：.jpg .png .gif .bmp .webp RAW
  const imageSource = image.createImageSource(uri);
  // 设置解码参数 DecodingOptions
  const decodingOptions: image.DecodingOptions = {
    editable: true,
    desiredPixelFormat: 3,
  }
  let pixelMap: PixelMap;
  try {
    // 创建 PixelMap
    pixelMap = await imageSource.createPixelMap(decodingOptions);
  } catch (err) {
    console.error(Invoke imageSource.createPixelMap failed, err: ${JSON.stringify(err)});
  }
  return pixelMap;
}
export async function savePixelMap2MediaLibraryByFilePicker(pixelMap: PixelMap) {
  try {
    const imageBuffer = await packingPixelMap2Jpg(pixelMap);
    const mediaUri = await getMediaUriByFilePickerSave();

    if (mediaUri &amp;&amp; imageBuffer.byteLength) {
      const imageUri = `${mediaUri}/IMG_${getTimeStringInYYMMDD_HHMMSS()}.jpg}`;
      saveArrayBuffer2File(imageBuffer, imageUri);
      console.info(`Invoke savePixelMap2MediaLibrary succeed`);
    }

  } catch (err) {
    console.error(Invoke savePixelMap2MediaLibrary failed, err: ${JSON.stringify(err)});
  }
}
// 保存 PixelMap 至媒体库
export async function savePixelMap2MediaLibrary(pixelMap: PixelMap, context: common.Context): Promise<void> {
  try {
    const imageBuffer = await packingPixelMap2Jpg(pixelMap);
    if (imageBuffer.byteLength) {
      saveArrayBuffer2MediaLibrary(context, imageBuffer);
      console.info(`Invoke savePixelMap2MediaLibrary succeed`);
    } else {
      console.error(`Invoke savePixelMap2MediaLibrary failed, err: image is null`)
    }

  } catch (err) {
    console.error(Invoke savePixelMap2MediaLibrary failed, err: ${JSON.stringify(err)});
  }
}