HarmonyOS view生成图片,然后保存到相册

view生成图片,然后保存到相册

HarmonyOS
2024-12-20 16:29:20
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
superinsect

思路如下

//1.海报布局
Column() {
  // 顶部图片
  this.renderImage(this.isHiresSong)

  // hire音质
  if (this.labelInfoJson !== null || this.labelInfoJson !== undefined) {
    this.renderHiresLabel()
  }

  // 歌词
  if (this.selectLyricList.length > 0) {
    this.renderLyric()
  }

  // 标题、作者
  this.renderTitleInfo(this.selectLyricList.length > 0)

  // 水印、二维码
  this.renderWatermarkQrc()
}
.id('placard_layout')
.backgroundColor(this.bgColor)
.margin({ top: '25vp', bottom: '48vp', left: '30vp', right: '30vp' })
.padding({ top: '16vp', bottom: '16vp', left: '16vp', right: '16vp' })
//2.存储前先判断权限(如果是应用内存储不需要权限)
注意:ohos.permission.WRITE_IMAGEVIDEO是系统权限system_basic,如果是普通应用需要通过ACL提权,
let content: Context = getContext(this)
let permissions: Array<Permissions> = ['ohos.permission.WRITE_IMAGEVIDEO']
let atManager = abilityAccessCtrl.createAtManager();
let promise = atManager.requestPermissionsFromUser(content, permissions);
let rejectNum = 0;
promise.then(async (data) => {
  let grant: number[] = data.authResults;
  let grantName: string[] = data.permissions;
  for (let i = 0; i < grant.length; i++) {
    if (grant[i] !== 0) {
      console.info(TAG, 'user reject permission request ' + grantName[i]);
      /* 用户拒绝权限 */
      rejectNum++;
    }
  }
  if (rejectNum > 0) {
    promptAction.showToast({ message: '拒绝权限' })
  } else {
    this.savePlacard()
  }
}).catch((err: Error) => {
  console.error(TAG, ' requestPermissionsFromUser, error = ' + err);
});
//3.存储
通过componentSnapshot.get(“placard_layout”)提供获取组件截图的能力,包括已加载的组件的截图和没有加载的组件的截图,返回image.PixelMap
组件截图只能够截取组件大小的区域,如果组件的绘制超出了它的区域,或子组件的绘制超出了父组件的区域,这些在组件区域外绘制的内容不会在截图中呈现。
componentSnapshot.get("placard_layout")
  .then((pixmap: image.PixelMap) => {
    this.pixmap = pixmap;
    // 选择存储方式
    ...
  })
//1)、直接存储到应用存储空间
image.createImagePacker().packing(pixmap, { format: "image/jpeg", quality: 98 })
  .then(((data: ArrayBuffer): void => {
    let dir = getContext().cacheDir
    let file = fs.openSync(`${dir}/xxx.jpg`, fs.OpenMode.WRITE_ONLY | fs.OpenMode.CREATE | fs.OpenMode.TRUNC)
    let len: number = fs.writeSync(file.fd, data, { encoding: "utf-8" })
    console.log(`${len}`)
  }))
//2)、ohos.file.picker拉起系统文件管理器,用户选择文件保存路径,返回uri
const photoSaveOptions = new picker.PhotoSaveOptions(); // 创建文件管理器
photoSaveOptions.newFileNames = [fileName + '.png'];
const photoViewPicker = new picker.PhotoViewPicker();
photoViewPicker.save(photoSaveOptions)
  .then((photoSaveResult) => {
    console.log(TAG, "photoSaveUri  photoSaveResult[0]" + JSON.stringify(photoSaveResult[0]))
    this.photoSaveUri = photoSaveResult[0]
  })
  .catch((err:Error) => {
    console.log(TAG, "photoSaveUri  fail" + JSON.stringify(err))
    promptAction.showToast({message:'保存失败'})
  })
//3)、通过photoAccessHelper存储到相册
let photoType = photoAccessHelper.PhotoType.IMAGE;
let extension = 'jpg';
const context = getContext(this);
let phAccessHelper = photoAccessHelper.getPhotoAccessHelper(context);

phAccessHelper.createAsset(photoType, extension, {
  title: fileName
}, (err, uri) => {
  if (uri != undefined) {
    console.info(TAG + 'createAsset uri' + uri);
    this.photoSaveUri = uri
    console.info(TAG + 'createAsset successfully');
  } else {
    console.error(TAG + 'createAsset failed, message = ', err);
  }
});
//完成后图片并没有存储,还需要执行写文件操作
pixmap: image.PixelMap | undefined = undefined;
@State @Watch("onPhotoSaveUriUpdate") photoSaveUri: string = '';

// 监听uri的更新,进行用户文件读写操作
onPhotoSaveUriUpdate() {
  if (this.photoSaveUri) {
    console.error(TAG, 'photoSaveUri is: ' + JSON.stringify(this.photoSaveUri));
    // 创建图像编码ImagePacker对象
    const imagePacker = image.createImagePacker();
    // 设置编码输出流和编码参数,进行图片编码
    if (this.pixmap === undefined) {
      return
    }
    imagePacker.packing(this.pixmap, { format: "image/jpeg", quality: 100 })
      .then(data => {
        // 打开文件
        let file = fs.openSync(this.photoSaveUri, fs.OpenMode.WRITE_ONLY);
        // 编码成功,写操作
        fs.writeSync(file.fd, data);
        fs.closeSync(file);
        promptAction.showToast({
          message: '已成功保存至相册',
          duration: 1000
        })
      })
      .catch((error: Error) => {
        console.error(TAG, 'Failed to pack the image. And the error is: ' + error);
      })
  }
}
分享
微博
QQ
微信
回复
2024-12-20 18:22:07
相关问题
HarmonyOS 图片保存到相册
219浏览 • 1回复 待解决
HarmonyOS 图片保存到相册报错
525浏览 • 1回复 待解决
HarmonyOS 如何将图片保存到相册
263浏览 • 1回复 待解决
获取网络图片保存到相册
2174浏览 • 1回复 待解决
HarmonyOS如何把图片保存到手机相册
1086浏览 • 1回复 待解决
如何把图片和文案结合,保存到相册
752浏览 • 0回复 待解决
HarmonyOS 保存到相册报错13900012
525浏览 • 1回复 待解决
HarmonyOS 如何将base64的图片保存到相册
1709浏览 • 1回复 待解决
有谁知道如何将图片保存到相册
1802浏览 • 1回复 待解决
HarmonyOS如何将PixelMap保存到相册
947浏览 • 1回复 待解决
HarmonyOS 有没有保存到相册的组件
356浏览 • 1回复 待解决
HarmonyOS image.PixelMap保存到 相册问题
397浏览 • 1回复 待解决