HarmonyOS 如何将当前视图组件保存为图片并保存呢?

HarmonyOS 如何将当前视图组件保存为图片并保存呢?

HarmonyOS
2024-10-16 09:16:36
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
superinsect

可以用组件截图,文档如下:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-arkui-componentsnapshot-V5

import componentSnapshot from '@ohos.arkui.componentSnapshot'  
import image from '@ohos.multimedia.image'  
@Entry  
@Component  
struct waterMarkPage {  
  @State pixmap: image.PixelMap | undefined = undefined  
  build() {  
    Column() {  
      Stack({ alignContent: Alignment.Center }){  
        Image($r('app.media.ic_product02')).autoResize(true).width(300).height(300)  
        Row() {  
          Text("水印").width(40).height(20).fontSize(16).fontColor(Color.White)  
            .border({ color: Color.Red, width: 1 }).borderRadius(4)  
            .margin({top:10,right:10})  
        }  
        .width(300).height(300)  
        .alignItems(VerticalAlign.Top)  
        .justifyContent(FlexAlign.End)  
        Row() {  
          Image($r('app.media.startIcon')).autoResize(true).width(40).height(40).margin({bottom:10,right:10})  
        }  
        .width(300).height(300)  
        .alignItems(VerticalAlign.Bottom)  
        .justifyContent(FlexAlign.End)  
      }  
      .id("root")  
      Button("生成水印图片")  
        .onClick(() => {  
          componentSnapshot.get("root")  
            .then((pixmap: image.PixelMap) => {  
              this.pixmap = pixmap  
            }).catch((err:Error) => {  
            console.log("error: " + err)  
          })  
        }).margin(10)  
      Image(this.pixmap).width(300).height(300).border({ color: Color.Blue, width: 1 }).margin(5)  
    }  
    .width('100%')  
    .height('100%')  
    .alignItems(HorizontalAlign.Center)  
  }  
}

pixelMap保存到相册:

async imageWriteAlbumExample(pixelMap:image.PixelMap) {  
  console.info('createAssetDemo');  
  let context = getContext(this);  
  let phAccessHelper = photoAccessHelper.getPhotoAccessHelper(context);  
  let photoType: photoAccessHelper.PhotoType = photoAccessHelper.PhotoType.IMAGE;  
  let extension:string = 'jpg';  
  let options: photoAccessHelper.CreateOptions = {  
    title: 'testPhoto'  
  }  
  let uri = await phAccessHelper.createAsset(photoType, extension, options);  
  try {  
      // 方式:通过imagePacker写入文件  
      let file: fs.File = fs.openSync(uri, fs .OpenMode.WRITE_ONLY);  
      let imagePacker: image.ImagePacker = image.createImagePacker();  
      let packOpts: image.PackingOption = { format: 'image/jpeg', quality: 100 };  
      await imagePacker.packToFile(pixelMap , file.fd, packOpts);  
      fs.closeSync(file);  
      promptAction.showToast({  
        message: '已保存至相册',  
        duration: 2500  
     });  
  }  
  catch (err) {  
    console.error("error is "+ JSON.stringify(err))  
    promptAction.showToast({  
      message: '保存失败',  
      duration: 2000  
    });  
  }  
}
分享
微博
QQ
微信
回复
2024-10-16 16:46:50
相关问题
base64字符串保存为图片的方法
792浏览 • 1回复 待解决
如何将像素点保存图片文件
2281浏览 • 1回复 待解决
HarmonyOS如何将PixelMap保存到相册?
532浏览 • 1回复 待解决
有谁知道如何将图片保存到相册
978浏览 • 1回复 待解决
如何将Pixmap保存到本地文件?
440浏览 • 1回复 待解决
如何将视频保存到相册以及主机端
5555浏览 • 1回复 待解决
获取网络图片保存到相册
1390浏览 • 1回复 待解决
图片压缩保存方法,有人知道吗?
786浏览 • 0回复 待解决
如何将一段文字保存到剪切板中?
303浏览 • 1回复 待解决
HarmonyOS图片保存相册问题
401浏览 • 1回复 待解决
HarmonyOS 保存图片文件异常
263浏览 • 1回复 待解决
base64字符串如何转为图片保存
2608浏览 • 1回复 待解决
应用内组件截图保存到用户文件
1036浏览 • 1回复 待解决
HarmonyOS 保存图片到相册问题
287浏览 • 1回复 待解决