鸿蒙 如何将base64的图片保存到相册

把一个base64图片 保存到鸿蒙手机 相册中怎么实现呢?

下面有2中方法

方案一:可以通过安全控件「保存控件(SaveButton)」实现。该控件对应媒体库写入特权。应用集成保存控件后,用户点击该控件,应用会获取10秒内单次访问媒体库特权接口的授权。

参考代码:

import { photoAccessHelper } from '@kit.MediaLibraryKit';
import fs from '@ohos.file.fs';
import { http } from '@kit.NetworkKit';
import { promptAction } from '@kit.ArkUI';

/** * 参考资料: * https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/photoaccesshelper-resource-guidelines-0000001774280306-V5#ZH-CN_TOPIC_0000001881258417__使用安全控件创建媒体资源 */
@Entry
@Component
struct Index {
  @State message: string = 'Hello World'
  @State saveButtonOptions: SaveButtonOptions = {
    icon: SaveIconStyle.FULL_FILLED,
    text: SaveDescription.SAVE_IMAGE,
    buttonType: ButtonType.Capsule
  }

  // 设置安全控件按钮属性
  build() {
    Row() {
      Column() {
        Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)
        SaveButton(this.saveButtonOptions)// 创建安全控件按钮
          .onClick(async (event, result: SaveButtonOnClickResult) => {
            if (result == SaveButtonOnClickResult.SUCCESS) {
              let context = getContext();
              //获取相册管理模块的实例,用于访问和修改相册中的媒体文件 let phAccessHelper = photoAccessHelper.getPhotoAccessHelper(context); 
              // onClick触发后10秒内通过createAsset接口创建图片文件,10秒后createAsset权限收回
              let uri = await phAccessHelper.createAsset(photoAccessHelper.PhotoType.IMAGE, 'jpg');
              // 创建媒体文件
              console.info('createAsset successfully, uri: ' + uri);
              let file = fs.openSync(uri, fs.OpenMode.READ_WRITE || fs.OpenMode.CREATE);
              let totalSize = 0;
              let httpRequest = http.createHttp();
              httpRequest.on("dataReceive", (data: ArrayBuffer) => {
                let writeLen = fs.writeSync(file.fd, data);
                totalSize = totalSize + writeLen;
              });
              httpRequest.requestInStream('https://developer.huawei.com/allianceCmsResource/resource/HUAWEI_Developer_VUE/images/homeNew/next- pc.png',
                { method: http.RequestMethod.GET, connectTimeout: 3000, }, httpCode => {
                  console.info('requestInStream HTTP CODE is', httpCode)
                })
              httpRequest.on("dataEnd", () => {
                fs.close(file);
                promptAction.showDialog({ title: "下载图片结束,并保存至相册", message: `图片大小:${totalSize}字节` })
              })
            } else {
              console.error('SaveButtonOnClickResult create asset failed');
            }
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

方案二:通过申请ACL权限。需要在module.json5文件中配置ohos.permission.WRITE_IMAGEVIDEO权限。类似这样: { // 允许修改用户公共目录的图片或视频文件。 "name": "ohos.permission.WRITE_IMAGEVIDEO", "reason": "$string:internet_permission_reason", "usedScene": { "when": "always" } }

import { abilityAccessCtrl, common } from '@kit.AbilityKit';
 import { photoAccessHelper } from '@kit.MediaLibraryKit';
 import fs from '@ohos.file.fs';
 import { http } from '@kit.NetworkKit';
 import { promptAction } from '@kit.ArkUI';
 @Entry
 @Component struct Index {
 @State message: string = 'Hello World'
 private appContext: common.Context = getContext(this);
 private atManager = abilityAccessCtrl.createAtManager();
  
 build() {
    Row() {
      Column() {
        Text(this.message)
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
       Button("保存图片")
       .margin({ top: 10 })
       .onClick(async (event: ClickEvent) => { 
           //申请权限并保存图片到图库
         try { 
         //申请相册管理模块权限'ohos.permission.WRITE_IMAGEVIDEO' 
          this.atManager.requestPermissionsFromUser(this.appContext, [ 'ohos.permission.WRITE_IMAGEVIDEO' ]).then(async () => { 
         //权限申请成功,保存到图库
         let context = getContext();
         //获取相册管理模块的实例,用于访问和修改相册中的媒体文件
         let phAccessHelper = photoAccessHelper.getPhotoAccessHelper(context); 
         // onClick触发后10秒内通过createAsset接口创建图片文件,10秒后createAsset权限收回
         let uri = await phAccessHelper.createAsset(photoAccessHelper.PhotoType.IMAGE, 'jpg');
        // 创建媒体文件
        console.info('createAsset successfully, uri: ' + uri);
        let file = fs.openSync(uri, fs.OpenMode.READ_WRITE || fs.OpenMode.CREATE);
       let totalSize = 0;
       let httpRequest = http.createHttp();
        httpRequest.on("dataReceive", (data: ArrayBuffer) => {
       let writeLen = fs.writeSync(file.fd, data); 
       totalSize = totalSize + writeLen; });
       httpRequest.requestInStream('https://developer.huawei.com/allianceCmsResource/resource/HUAWEI_Developer_VUE/images/homeNew/next- pc.png',
        { method: http.RequestMethod.GET, connectTimeout: 3000, }, httpCode => {
          console.info('requestInStream HTTP CODE is', httpCode) })
           httpRequest.on("dataEnd", () => { 
           fs.close(file);
         promptAction.showDialog({ title: "下载图片结束,并保存至相册", message: `图片大小:${totalSize}字节` }) }) }) 
           } catch (err) { 
             console.error(`requestPermissionsFromUser call Failed! error: ${err.code}`); } }) }
           .width('100%') 
          }
        .height('100%') 
     } 
}

在 UniApp 开发中,将 Base64 格式的图片保存到手机相册,可以按照以下步骤操作: 1. 首先,你需要将 Base64 图片转换为 Blob 对象,这是本地操作的基础。你可以使用 `atob` 函数配合 `Buffer.from` 来完成这个转换。例如: ```javascript let base64Image = 'your_base64_string'; const byteString = atob(base64Image); const buffer = Buffer.byteLength(byteString as any) > 0 ? new Uint8Array(new Array(byteString.length).fill(0)) : []; buffer.set(new Uint8Array(byteString)); ``` 2. 然后,利用 UniApp 提供的原生 API,比如 `uni.getImageInfo` 获取文件信息,创建一个 `File` 对象: ```javascript uni.createSelectorQuery().select('input[type=file]').fields({ size: true }).then((res) => { const file = new File([buffer], 'image.jpg', { type: 'image/jpeg' }); // 接下来就可以调用相机插件或其他方法保存图片相册了 }); ``` 这里假设你有一个 input 元素用于选择图片,然后读取并转换为 Base64 格式。 3. 最后,通过调用相应的相机插件或系统提供的 API 来实现保存功能。由于 UniApp 可能有不同的平台支持,这一步的具体实现可能会有所不同。通常,你可以在调用前检查设备是否支持照片库权限以及用户是否已授权。 注意,为了确保用户体验和隐私安全,你应该在用户明确触发保存操作(如点击按钮)时执行这些步骤,并且在调用涉及用户隐私的操作时显示提示。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值