HarmonyOS base64格式的图片数据如何保存文件到本地相册?

base64格式的图片数据如何保存文件到本地相册,前端调交互方法把获取到的base64图片的字符串传给原生端,原生端拿到数据之后保存图片到本地。

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

先把base64转成文件流,然后使用@ohos.file.fs的fs.write方法先把图片写到自己的项目目录里面,然后在使用@ohos.file.picker读取目录里面的图片,保存到用户手机上。 参考示例如下:

saveImage() { 
  //文件保存路径 
  let uri = ''; 
  try { let PhotoSaveOptions = new picker.PhotoSaveOptions(); 
    //保存图片默认名称  
    PhotoSaveOptions.newFileNames = ['test.png']; 
    let photoPicker = new picker.PhotoViewPicker(); 
    //调起系统的图片保存功能  
    photoPicker.save(PhotoSaveOptions).then((PhotoSaveResult) => { 
      uri = PhotoSaveResult[0]; 
      //获取图片的base64字符串  
      let imageStr = '图片的base64字符串'.split(','); 
      //打开文件 
      let file = fs.openSync(uri, fs.OpenMode.READ_WRITE); 
      //base64字符串转成 
      buffer const decodeBuffer = buffer.from(imageStr, 'base64').buffer; 
      //写入文件  
      fs.writeSync(file.fd, decodeBuffer); 
      //关闭文件 
      fs.closeSync(file); }).catch((err: Error) => { console.error(err + ''); }) 
  } 
  catch (e) { console.error(e); } 
}

​图片保存到相册,可以通过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%')  
}  
}
分享
微博
QQ
微信
回复
2024-11-12 15:09:52
相关问题
如何保存本地图片相册
1062浏览 • 1回复 待解决
HarmonyOS 如何base64数据转换为图片
505浏览 • 1回复 待解决
HarmonyOS Image如何显示base64图片
441浏览 • 1回复 待解决
HarmonyOS 图片压缩和图片base64
263浏览 • 1回复 待解决
base64字符串如何转为图片保存
2659浏览 • 1回复 待解决
HarmonyOS如何图片Base64
905浏览 • 1回复 待解决
HarmonyOS 图片进行base64编码报错
676浏览 • 1回复 待解决
base64字符串保存图片方法
853浏览 • 1回复 待解决
HarmonyOS 保存图片相册问题
354浏览 • 1回复 待解决
HarmonyOS 图片操作,合成后导出base64
215浏览 • 1回复 待解决
如何base64转换成图片
10312浏览 • 2回复 待解决
怎么把PixelMap图片BASE64
9411浏览 • 1回复 待解决
js canvas转base64编码图片不全
10790浏览 • 1回复 待解决
HarmonyOS base64解码报错
1031浏览 • 1回复 待解决
HarmonyOS 保存图片相册权限问题
278浏览 • 1回复 待解决
HarmonyOS 图片转为base64字符串
176浏览 • 1回复 待解决
HarmonyOS base64编码API
186浏览 • 1回复 待解决