HarmonyOS鸿蒙Next中web页面有个按钮和一个图片，点击按钮要保存图片到相册怎么实现

【设备信息】 Mate60pro
【API版本】 Api14
【DevEco Studio版本】 5.0.2 Release
【问题描述】 web页面有个按钮和一个图片，点击按钮要保存图片到相册怎么实现,web 页面有一个二维码，二维码下面有一个保存按钮，点击保存要将二维码保存到手机相册，该怎么实现。

phonegap100 1楼

H5图片保存到相册可以参考如下链接： https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-photoaccesshelper-V5#showassetscreationdialog12

具体参考代码如下：

import common from '@ohos.app.ability.common';
import fs from '@ohos.file.fs';
import request from '@ohos.request';
import { BusinessError } from '@ohos.base';
import buffer from '@ohos.buffer';
import { dataSharePredicates } from '@kit.ArkData';
import { photoAccessHelper } from '@kit.MediaLibraryKit';
import { fileIo, fileUri } from '@kit.CoreFileKit';
import { http } from '@kit.NetworkKit';

// 获取应用文件路径
let context = this as common.UIAbilityContext;
let phAccessHelper = photoAccessHelper.getPhotoAccessHelper(context);
let filesDir = context.filesDir;
let url='https://img.alicdn.com/imgextra/i4/O1CN01aG16y424E11XsURUd_!!6000000007358-2-tps-206-240.png'

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

  aboutToAppear(): void {

  }

  build() {
    RelativeContainer() {
      Text(this.message)
        .id('HelloWorld')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        }).onClick(() =>{
          saveImage()
      })
    }
    .height('100%')
    .width('100%')
  }
}

async function saveImage() {
  console.info('ShowAssetsCreationDialogDemo.');
  let uri = fileUri.getUriFromPath(filesDir + '/1.jpg');
  try {
    // 获取需要保存到媒体库的位于应用沙箱的图片/视频uri
    let srcFileUris: Array<string> = [
      uri// 实际场景请使用真实的uri
    ];
    let photoCreationConfigs: Array<photoAccessHelper.PhotoCreationConfig> = [
      {
        title: '1', // 可选
        fileNameExtension: 'jpg',
        photoType: photoAccessHelper.PhotoType.IMAGE,
        subtype: photoAccessHelper.PhotoSubtype.DEFAULT, // 可选
      }
    ];
    let desFileUris: Array<string> = await phAccessHelper.showAssetsCreationDialog(srcFileUris, photoCreationConfigs);
    console.info('showAssetsCreationDialog success, data is ' + desFileUris);
    request.createHttp().request(url,
      {
        method: request.RequestMethod.GET,
        connectTimeout: 60000,
        readTimeout: 60000
      },
      async (error: BusinessError, data: request.HttpResponse) => {
        if (error) {
          console.error(`http reqeust failed with. Code: ${error.code}, message: ${error.message}`);
        } else {
          if (request.ResponseCode.OK === data.responseCode) {
            let imageBuffer: ArrayBuffer = data.result as ArrayBuffer;
            try {
              let file = await fileIo.open(desFileUris[0], fileIo.OpenMode.READ_WRITE | fileIo.OpenMode.CREATE)
              // 写入文件
              await fileIo.write(file.fd, imageBuffer);
              // 关闭文件
              await fileIo.close(file.fd);
            } catch (error) {
              console.error("error is " + JSON.stringify(error))
            }
          } else {
            console.error("error occurred when image downloaded!")
          }
        }
      })

  } catch (err) {
    console.error('showAssetsCreationDialog failed, errCode is ' + err.code + ', errMsg is ' + err.message);
  }
}

更多关于HarmonyOS鸿蒙Next中web页面有个按钮和一个图片，点击按钮要保存图片到相册怎么实现的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

wuwangju 2楼

提供一个思路，在web中run javascript然后return 图片的base64，然后在arkts侧转换成字节流再保存

phonegap100 3楼

在HarmonyOS Next中，可以通过@ohos.file.picker模块实现保存图片到相册。首先，使用PhotoViewPicker选择图片保存路径，然后使用@ohos.file.fs模块将图片文件写入指定路径。具体步骤包括：创建PhotoViewPicker实例，调用save方法选择保存路径，获取文件URI后，使用fs.copyFile将图片文件复制到目标路径。

bupafengyu 4楼

在HarmonyOS Next中实现Web页面图片保存到相册的功能，可以通过以下方式实现：

首先确保在config.json中声明相册读写权限：

"reqPermissions": [
  {
    "name": "ohos.permission.READ_MEDIA",
    "reason": "读取相册"
  },
  {
    "name": "ohos.permission.WRITE_MEDIA",
    "reason": "保存图片到相册"
  }
]

Web页面与原生代码交互方案：

方案一：使用Web组件postMessage

// Web页面代码
document.getElementById('saveBtn').addEventListener('click', () => {
  const img = document.getElementById('qrcodeImg');
  const canvas = document.createElement('canvas');
  canvas.width = img.width;
  canvas.height = img.height;
  const ctx = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0);
  const dataUrl = canvas.toDataURL('image/png');
  window.chrome.webview.postMessage(dataUrl);
});

方案二：使用JSBridge桥接（推荐）

// 原生侧注册JSBridge
webController.registerJavaScriptProxy({
  saveImageToGallery: (base64Data) => {
    import('@ohos.file.fs');
    import('@ohos.mediaLibrary');
    
    // 1. 转换base64为Uint8Array
    const data = base64Data.split(',')[1];
    const buffer = new Uint8Array(atob(data).split('').map(c => c.charCodeAt(0)));
    
    // 2. 保存到相册
    const context = getContext(this);
    const mediaLib = mediaLibrary.getMediaLibrary(context);
    mediaLib.createAsset(
      mediaLibrary.MediaType.IMAGE,
      'qrcode.png',
      (err, asset) => {
        if (!err) {
          fs.write(asset.open('w'), buffer);
        }
      }
    );
  }
}, 'imageSaver');

// Web页面调用
window.imageSaver.saveImageToGallery(imgDataUrl);

注意事项：

确保图片是同一域名下的资源或已处理跨域问题
对于网络图片需要先下载到本地
用户需授权媒体库权限
建议添加保存成功/失败的Toast提示