HarmonyOS componentSnapshot.get 保存的图片无法显示

我在用 componentSnapshot.get 进行页面保存为图片时，能保存成功，但是图片无法显示。请问可能是什么原因导致的。在文件管理器中，看到的图片是有数据的

HarmonyOS componentSnapshot.get 保存的图片无法显示 -鸿蒙开发者社区

保存代码

async saveQrCode() {
  try{
    let photoPicker = new picker.DocumentViewPicker();
    let PhotoSaveOptions = new picker.PhotoSaveOptions();
    let dateTimeUtil: DateTimeUtil = new DateTimeUtil();
    let writeLen:number =0 ;
    let pixmapData: image.PixelMap;
    let fd: number | undefined = undefined;
    PhotoSaveOptions.newFileNames = [`Qrcode_${dateTimeUtil.getDate()}_${dateTimeUtil.getTime()}.png`];
    let PhotoSaveResult: Array<string> = await photoPicker.save(PhotoSaveOptions);
    let savePath = PhotoSaveResult[0];
    let pixmap: image.PixelMap = await componentSnapshot.get(MyQRCodePage.ID_SCREEN_SHOOT_AREA);
    pixmapData = pixmap;
    let pixelBytesNumber : number = pixmap.getPixelBytesNumber();
    let readBuffer: ArrayBuffer = new ArrayBuffer(pixelBytesNumber);
    await pixmap.readPixelsToBuffer(readBuffer);
    let file = fs.openSync(savePath, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE);
    fd = file.fd;
    writeLen = await fs.write(file.fd, readBuffer);
    if (fd) {
      fs.closeSync(fd);
    }
    if(pixmapData){
      pixmapData.release();
    }
    if(writeLen>0){
      CommonToast.show($r('app.string.Stu_Save_Success'), CommonConstants.TOAST_LONG_DELAY);
      //成功
    }else{
      //失败
      CommonToast.show($r('app.string.Stu_Save_Failed'), CommonConstants.TOAST_LONG_DELAY);
    }
  }catch(err){
    Logger.error("saveQrCode error: " + err)
    CommonToast.show($r('app.string.Stu_Save_Failed'), CommonConstants.TOAST_LONG_DELAY);
  }
}

HarmonyOS

superinsect

2024-12-27 16:47:18

浏览

回答 1

待解决

回答 1

按赞同

按时间

FengTianYa

1、componentSnapshot.get 获取图片结果为 image.PixelMap 为像素分布，需要使用 imagePackerApi.packing 转换为 jpg\png 等格式。

文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-image-V5

2、Demo：componentSnapshot.get 保存的图片，组件 id 为 root，保存文件名：test.png

async savePhotoFromComponentSnapshot() {
  let pixmap: image.PixelMap = await componentSnapshot.get('root');
  let savePath = await this.getPhotoPicker("test.png")
  this.savePixmap(pixmap, savePath)
}

async getPhotoPicker(photoName: string): Promise<string> {
  // 拉起 photoPicker 获取保存路径
  let photoSaveOptions = new picker.PhotoSaveOptions();
  let photoPicker = new picker.PhotoViewPicker;
  photoSaveOptions.newFileNames = [photoName];
  let photoSaveResult: Array<string> = await photoPicker.save(photoSaveOptions);
  let savePath = photoSaveResult[0];
  return savePath;
}

async packingPixelMap2Jpg(pixelMap: image.PixelMap): Promise<ArrayBuffer> {
  // pixel 转 jpg
  // 创建ImagePacker实例
  const imagePackerApi = image.createImagePacker();
  // 设置打包参数
  // format：图片打包格式，只支持 jpg 和 webp
  // quality：JPEG 编码输出图片质量
  // bufferSize：图片大小，默认 10M
  const packOpts: image.PackingOption = { format: "image/png", quality: 98 };
  let imageBuffer: ArrayBuffer = new ArrayBuffer(10);
  try {
  // 图片压缩或重新打包
  imageBuffer = await imagePackerApi.packing(pixelMap, packOpts);
} catch (err) {
  console.error(`Invoke packingPixelMap2Jpg failed, err: ${JSON.stringify(err)}`);
}
return imageBuffer;
}

async savePixmap(pixelMap: image.PixelMap, savePath: string) {
  // 保存位图
  const imageBuffer = await this.packingPixelMap2Jpg(pixelMap);
  try {
    const file = fs.openSync(savePath, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE);
    fs.writeSync(file.fd, imageBuffer);
    fs.closeSync(file);
  }
  catch (err) {
    console.error(`Invoke copyFile failed, err: ${JSON.stringify(err)}`);
  }
}

2024-12-27 18:31:17

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS componentSnapshot.get 保存的图片无法显示

订阅鸿蒙技术特刊，精选内容抢先看