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

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

HarmonyOS
2024-12-27 15:46:55
浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
superinsect

可参考示例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)});
  }
}
  • 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.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.
  • 72.
  • 73.
  • 74.
  • 75.
  • 76.
  • 77.
  • 78.
  • 79.
  • 80.
  • 81.
  • 82.
  • 83.
  • 84.
  • 85.
  • 86.
  • 87.
  • 88.
  • 89.
  • 90.
  • 91.
  • 92.
  • 93.
  • 94.
  • 95.
  • 96.
  • 97.
  • 98.
  • 99.
  • 100.
  • 101.
  • 102.
  • 103.
  • 104.
  • 105.
  • 106.
  • 107.
  • 108.
  • 109.
  • 110.
  • 111.
  • 112.
  • 113.
  • 114.
  • 115.
  • 116.
  • 117.
  • 118.
  • 119.
  • 120.
  • 121.
  • 122.
  • 123.
  • 124.
  • 125.
  • 126.
  • 127.
  • 128.
  • 129.
  • 130.
  • 131.
  • 132.
  • 133.
  • 134.
  • 135.
  • 136.
  • 137.
分享
微博
QQ
微信
回复
2024-12-27 19:07:11
相关问题
HarmonyOS 获取网络图片PixelMap
786浏览 • 1回复 待解决
HarmonyOS 如何下载图片
735浏览 • 1回复 待解决
HarmonyOS 如何获取矩阵变换后PixelMap
644浏览 • 1回复 待解决
如何获取已经连接wifi密码
1615浏览 • 1回复 待解决
如何PixelMap处理图片
3198浏览 • 1回复 待解决
HarmonyOS PixelMap加载图片
750浏览 • 1回复 待解决
HarmonyOS 网络图片如何转换成PixelMap
728浏览 • 1回复 待解决
HarmonyOS 文件或者图片下载
554浏览 • 1回复 待解决
HarmonyOS 图片文件下载
970浏览 • 1回复 待解决
PixelMap怎么保存成图片文件
1331浏览 • 1回复 待解决
HarmonyOS 图片下载相关
677浏览 • 1回复 待解决