HarmonyOS 如何将指定布局内容保存为图片,并保存到相册

做一个功能,点击按钮,然后保存指定的部分组件内容为图片,然后保存到相册,如何实现呢

HarmonyOS
2天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
Excelsior_abit

尝试使用组件截图功能componentSnapshot

参考文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-arkui-componentsnapshot-V5

安全控件保存:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-security-components-savebutton-V5#savedescription%E6%9E%9A%E4%B8%BE%E8%AF%B4%E6%98%8E

参考demo:

import { componentSnapshot } from '@kit.ArkUI';
import { image } from '@kit.ImageKit';
import { photoAccessHelper } from '@kit.MediaLibraryKit';
import fs from '@ohos.file.fs';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct ComponentSnapshotPage {
  @State message: string = 'Hello World';

  @State pixmap:image.PixelMap |null = null
  build() {
    Column(){
      Column(){
        Image($r('app.media.app_icon')).width(100).height(100).margin(5)
        Text("这是一串文字")
        Text("这是一串文字")
      }.width(200).height(200).id('hello').backgroundColor(Color.White)

      Image(this.pixmap).width(200).height(200).margin(10)

      SaveButton({text:SaveDescription.SAVE,buttonType:ButtonType.Capsule}).onClick(async (event:ClickEvent, result:SaveButtonOnClickResult) => {
        if (result == SaveButtonOnClickResult.SUCCESS) {
          componentSnapshot.get("hello", async (error: Error, pixmap: image.PixelMap) => {
            this.pixmap = pixmap

            let packOpts: image.PackingOption = { format: "image/jpeg", quality: 100 };
            const imagePackerApi = image.createImagePacker();
            imagePackerApi.packing(pixmap, packOpts).then(async (buffer: ArrayBuffer) => {
              try {
                const context = getContext(this)
                let helper = photoAccessHelper.getPhotoAccessHelper(context)
                let uri = await helper.createAsset(photoAccessHelper.PhotoType.IMAGE, 'jpg')
                let file = await fs.open(uri, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE)
                await fs.write(file.fd, buffer);
                // 关闭文件
                await fs.close(file.fd);
              } catch (error) {
                console.error("error is " + JSON.stringify(error))
              }
            }).catch((error: BusinessError) => {
              console.error('Failed to pack the image. And the error is: ' + error);
            })
          })
        }
      })
    }
    .height('100%')
    .width('100%')
  }
}
分享
微博
QQ
微信
回复
2天前
相关问题
HarmonyOS 如何将PixelMap保存为沙箱
47浏览 • 1回复 待解决
HarmonyOS如何将PixelMap保存到相册
613浏览 • 1回复 待解决
有谁知道如何将图片保存到相册
1080浏览 • 1回复 待解决
HarmonyOS 如何将base64的图片保存到相册
1031浏览 • 1回复 待解决
如何将视频保存到相册以及主机端
5628浏览 • 1回复 待解决
获取网络图片保存到相册
1534浏览 • 1回复 待解决
base64字符串保存为图片的方法
909浏览 • 1回复 待解决
如何将像素点保存到图片文件
2345浏览 • 1回复 待解决
HarmonyOS 图片保存到相册报错
57浏览 • 1回复 待解决
如何将Pixmap保存到本地文件?
509浏览 • 1回复 待解决
HarmonyOS如何图片保存到手机相册
549浏览 • 1回复 待解决
HarmonyOS 下载文件保存到指定目录
96浏览 • 1回复 待解决