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
2024-12-27 16:47:18
浏览
收藏 0
回答 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)}`);
  }
}
分享
微博
QQ
微信
回复
2024-12-27 18:31:17
相关问题
使用componentSnapshot.get能力报错
1021浏览 • 1回复 待解决
HarmonyOS heif图片无法显示
320浏览 • 1回复 待解决
HarmonyOS Image组件无法显示网络图片
1634浏览 • 1回复 待解决
HarmonyOS 图片保存
614浏览 • 1回复 待解决
HarmonyOS 图片保存功能
494浏览 • 1回复 待解决
HarmonyOS 图片保存失败
372浏览 • 1回复 待解决
HarmonyOS savebutton使用影响图片保存
360浏览 • 1回复 待解决
HarmonyOS 保存图片文件异常
832浏览 • 1回复 待解决
HarmonyOS图片保存相册问题
1047浏览 • 1回复 待解决
HarmonyOS 组件生成图片保存
435浏览 • 1回复 待解决