HarmonyOS 鸿蒙Next截图保存到相册，图片尺寸显示0x0的问题

开发截图保存到相册功能，从打印日志来看，整个过程似乎都正常，但从手机图库查看到，截图无法展示，查看图片详情发现尺寸是0x0，但文件大小有5M左右，不知道哪个环节出了问题，这里贴上代码，有大佬能看出问题所在吗

注：已成功申请读写相册权限


/**
 * 截图工具类
 */
export default class SnapshotUtils {
  /**
   * 组件截图
   */
  public static snapshot(context: Context, id: string) {
    K3Log.info(`snapshot id=${id}`);
    // 申请读写相册权限
    SnapshotUtils.checkPermissions(context as common.UIAbilityContext).then((isGranted) => {
      if (isGranted) {
        // 截图
        componentSnapshot.get(id, (error: Error, pixmap: image.PixelMap) => {
          if (error) {
            K3Log.info('componentSnapshot error ' + JSON.stringify(error));
            return;
          }
          K3Log.info('componentSnapshot success');
          // 保存到相册
          SnapshotUtils.saveToAlbum(context, pixmap);
        })
      }
    })
}
/**

保存到相册


*/
private static async saveToAlbum(context: Context, pixmap: image.PixelMap) {
let phAccessHelper = photoAccessHelper.getPhotoAccessHelper(context);
try {
let photoType: photoAccessHelper.PhotoType = photoAccessHelper.PhotoType.IMAGE;
let extension: string = ‘png’;
let options: photoAccessHelper.CreateOptions = {
title: testPhoto${<span class="hljs-keyword"><span class="hljs-keyword">new</span></span> <span class="hljs-built_in"><span class="hljs-built_in">Date</span></span>().getMilliseconds()}
}
phAccessHelper.createAsset(photoType, extension, options, (err, uri) => {
if (uri !== undefined) {
K3Log.info(‘createAsset uri’ + uri);
K3Log.info(‘createAsset successfully’);
fs.open(uri, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE).then((file: fs.File) => {
K3Log.info(<span class="hljs-built_in"><span class="hljs-built_in">ArrayBuffer</span></span> size: ${pixmap.getPixelBytesNumber()});
let buffer = new ArrayBuffer(pixmap.getPixelBytesNumber());
pixmap.readPixelsToBuffer(buffer).then(() => {
fs.write(file.fd, buffer).then((writeLen: number) => {
K3Log.info(save to ablum success. writeLen=${writeLen});
});
});
});
    } <span class="hljs-keyword"><span class="hljs-keyword">else</span></span> {
      K3Log.error(`createAsset failed, error: ${err.code}, ${err.message}`);
    }
  });
} <span class="hljs-keyword"><span class="hljs-keyword">catch</span></span> (err) {
  K3Log.error(<span class="hljs-string"><span class="hljs-string">'addAssets failed with err: '</span></span> + err);
}
}
private static async checkPermissions(context: common.UIAbilityContext): Promise<Boolean> {
let isGranted = await PermissionUtils.checkAccessToken(‘ohos.permission.READ_IMAGEVIDEO’);
let isGranted2 = await PermissionUtils.checkAccessToken(‘ohos.permission.WRITE_IMAGEVIDEO’);
<span class="hljs-keyword"><span class="hljs-keyword">if</span></span> (isGranted &amp;&amp; isGranted2) {
  <span class="hljs-comment"><span class="hljs-comment">// 已经授权，可以继续访问目标操作</span></span>
  <span class="hljs-keyword"><span class="hljs-keyword">return</span></span> <span class="hljs-literal"><span class="hljs-literal">true</span></span>;

} <span class="hljs-keyword"><span class="hljs-keyword">else</span></span> {
  <span class="hljs-comment"><span class="hljs-comment">// 未授权，动态向用户申请授权</span></span>
  <span class="hljs-keyword"><span class="hljs-keyword">let</span></span> permissions: <span class="hljs-built_in"><span class="hljs-built_in">Array</span></span>&lt;Permissions&gt; = [<span class="hljs-string"><span class="hljs-string">'ohos.permission.READ_IMAGEVIDEO'</span></span>, <span class="hljs-string"><span class="hljs-string">'ohos.permission.WRITE_IMAGEVIDEO'</span></span>];
  <span class="hljs-keyword"><span class="hljs-keyword">if</span></span> (!isGranted) {
    permissions.push(<span class="hljs-string"><span class="hljs-string">'ohos.permission.READ_IMAGEVIDEO'</span></span>);
    K3Log.info(<span class="hljs-string"><span class="hljs-string">'申请ohos.permission.READ_IMAGEVIDEO'</span></span>);
  }
  <span class="hljs-keyword"><span class="hljs-keyword">if</span></span> (!isGranted2) {
    permissions.push(<span class="hljs-string"><span class="hljs-string">'ohos.permission.WRITE_IMAGEVIDEO'</span></span>);
    K3Log.info(<span class="hljs-string"><span class="hljs-string">'申请ohos.permission.WRITE_IMAGEVIDEO'</span></span>);
  }
  <span class="hljs-keyword"><span class="hljs-keyword">let</span></span> isUserGranted = await PermissionUtils.reqPermissionsFromUser(context, permissions);
  <span class="hljs-keyword"><span class="hljs-keyword">return</span></span> isUserGranted;
}
}
}
@Entry
@Component
struct Index {
@State btFunc: string[] = [‘登录’, ‘充值’, ‘截图’];
itemOnClick(index: Number, name: string): void {
console.log(name)
switch (name) {
case ‘登录’:
break;
  <span class="hljs-keyword"><span class="hljs-keyword">case</span></span> <span class="hljs-string"><span class="hljs-string">'充值'</span></span>:
    <span class="hljs-keyword"><span class="hljs-keyword">break</span></span>;
  
  <span class="hljs-keyword"><span class="hljs-keyword">case</span></span> <span class="hljs-string"><span class="hljs-string">'截图'</span></span>:
    SnapshotUtils.snapshot(getContext(), <span class="hljs-string"><span class="hljs-string">"TuanjiePlayer"</span></span>);
    <span class="hljs-keyword"><span class="hljs-keyword">break</span></span>;
}
}
build() {
GridRow({
gutter: 10,
breakpoints: {
value: [‘200vp’, ‘300vp’, ‘400vp’, ‘500vp’, ‘600vp’],
reference: BreakpointsReference.WindowSize
}
}) {
ForEach(this.btFunc, (item: string, index) => {
GridCol({
span: {
xs: 2, // 在最小宽度类型设备上，栅格子组件占据的栅格容器2列。
sm: 3, // 在小宽度类型设备上，栅格子组件占据的栅格容器3列。
md: 4, // 在中等宽度类型设备上，栅格子组件占据的栅格容器4列。
lg: 6, // 在大宽度类型设备上，栅格子组件占据的栅格容器6列。
xl: 8, // 在特大宽度类型设备上，栅格子组件占据的栅格容器8列。
xxl: 12 // 在超大宽度类型设备上，栅格子组件占据的栅格容器12列。
}
}) {
Row() {
Button(${item}).width(“100%”).onClick(() => {
this.itemOnClick(index, item)
})
}.width(“100%”).height(‘50vp’)
}
})
}.margin(‘10vp’).id(“TuanjiePlayer”)
}
}
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

日志截图：

图库保存效果：

更多关于HarmonyOS 鸿蒙Next截图保存到相册，图片尺寸显示0x0的问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

sinazl 2楼•7 个月前

找HarmonyOS工作还需要会Flutter的哦，有需要Flutter教程的可以学学大地老师的教程，很不错，B站免费学的哦：https://www.bilibili.com/video/BV1S4411E7LY/?p=17

htzhanglong 3楼•7 个月前

楼主您好，

对于拿到的pixelMap先进行一个packing 代码如下：

let imagePackerApi = image.createImagePacker();
imagePackerApi.packing(pixelMap, packOpts).then(async (buffer : ArrayBuffer) => {
//
try {
const context = getContext(this)
let helper = photoAccessHelper.getPhotoAccessHelper(context)
let uri = await helper.createAsset(photoAccessHelper.PhotoType.IMAGE, ‘png’)
let file = await fs.open(uri, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE)
//let buffer = new ArrayBuffer(this.pixelMap!.getPixelBytesNumber())
// await this.image!.readPixelsToBuffer(buffer)
// 写入文件 注意加一个packing的过程
await fs.write(file.fd, buffer);
// 关闭文件
await fs.close(file.fd);
console.log("*******")
}catch (error) {
console.error("error is "+ JSON.stringify(error))
}
}).catch((error : BusinessError) => {
console.error('Failed to pack the image. And the error is: ’ + error);
})<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

sinazl 4楼•7 个月前

🤝我也是这样解决的；想请教下长列表想要将屏幕外的元素截到有什么好方案吗

yuanlaile 5楼•7 个月前

有要学HarmonyOS AI的同学吗，联系我：https://www.itying.com/goods-1206.html

nodeper 6楼•7 个月前

请问屏幕外的元素截到实现了吗

caililin 7楼•7 个月前

找HarmonyOS工作还需要会Flutter的哦，有需要Flutter教程的可以学学大地老师的教程，很不错，B站免费学的哦：https://www.bilibili.com/video/BV1S4411E7LY/?p=17

yibo5220 8楼•7 个月前

PermissionUtils 代码可以贴出来吗

yibo5220 9楼•7 个月前

有要学HarmonyOS AI的同学吗，联系我：https://www.itying.com/goods-1206.html

sinazl 10楼•7 个月前

PermissionUtils 代码可以贴出来吗

phonegap100 11楼•7 个月前

PermissionUtils 代码可以贴出来吗

yuanlaile 12楼•7 个月前

问题已解决，保存图片要经过打包处理

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/image-encoding-0000001774120518

private static async saveToAlbum(pixelMap: image.PixelMap) {
    try {
      let phAccessHelper = photoAccessHelper.getPhotoAccessHelper(getContext());
      let photoType: photoAccessHelper.PhotoType = photoAccessHelper.PhotoType.IMAGE;
      let extension: string = 'jpg';
      let options: photoAccessHelper.CreateOptions = {
        title: `gameshot${K3DateUtils.format(FormatType.YYYYMMDD_HHMMSS)}`
      }
      phAccessHelper.createAsset(photoType, extension, options, (err, uri) => {
        if (uri !== undefined) {
          K3Log.info('createAsset uri' + uri);
          let packOpts: image.PackingOption = {
            format: "image/jpeg", quality: 98
          };
          let imagePackerApi = image.createImagePacker();
          imagePackerApi.packing(pixelMap, packOpts).then((data: ArrayBuffer) => {
            // data 为打包获取到的文件流，写入文件保存即可得到一张图片
            fs.open(uri, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE).then((file: fs.File) => {
              fs.write(file.fd, data).then((writeLen: number) => {
                K3Log.error('截图保存成功.  writeLen=' + writeLen);
              });
            });
      }).catch((error: BusinessError) =&gt; {
        K3Log.error(<span class="hljs-string"><span class="hljs-string">'saveToAlbum. Failed to pack the image. And the error is: '</span></span> + error);
      });
    } <span class="hljs-keyword"><span class="hljs-keyword">else</span></span> {
      K3Log.error(`saveToAlbum failed, error: ${err.code}, ${err.message}`);
    }
  });
} <span class="hljs-keyword"><span class="hljs-keyword">catch</span></span> (err) {
  K3Log.error(<span class="hljs-string"><span class="hljs-string">'saveToAlbum failed with err: '</span></span> + err);
}}<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

eggper 13楼•7 个月前

楼主，会不会出现保存图片延迟好几分钟的情况，有好的解决办法吗

itying888 14楼•7 个月前

您好，您解决相册图片延时的问题了吗？

yuanlaile 15楼•7 个月前

fs.close(file.fd)即可解决

itying888 16楼•7 个月前

我好像也有这个问题

sinazl 17楼•7 个月前

补充一下，调用componentSnapShot方法返回pixmap对象，再调用pixmap.getImageInfo()读取图片尺寸，结果是1195x1138，由此可见截图功能正常的，可能是保存图片到相册环节出了问题，上面pixmap保存到文件代码是我根据API调用的，胡乱凑合，大家有没例子供参考下？