HarmonyOS 鸿蒙Next H5页面ArkWeb嵌入应用实现长按图片下载到相册功能示例

以下代码，可以在web长按，弹框提示下载，但是还有些粗糙，可以先参考下：

"requestPermissions": [
  {
    "name": "ohos.permission.INTERNET"
  },
  {
    "name": "ohos.permission.WRITE_IMAGEVIDEO",
    "reason": "$string:EntryAbility_desc",
    "usedScene": {
      "abilities": [
        "FormAbility"
      ],
      "when": "inuse"
    }
  }
]

index.ets

// xxx.ets
import { webview } from '@kit.ArkWeb';
import { http } from '@kit.NetworkKit';
import { BusinessError } from '@kit.BasicServicesKit';
import { ResponseCode } from '@ohos.net.http';
import { photoAccessHelper } from '@kit.MediaLibraryKit';
import fs from '@ohos.file.fs';
import { Permissions } from '@kit.AbilityKit';
import { abilityAccessCtrl } from '@kit.AbilityKit';

const TAG = 'ContextMenu';

@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();
  private result: WebContextMenuResult | undefined = undefined;
  @State linkUrl: string = '';
  @State offsetX: number = 0;
  @State offsetY: number = 0;
  @State showMenu: boolean = false;
  @State src: string = '';

  @Builder
  //构建自定义菜单及触发功能接口
  MenuBuilder() {
    //以垂直列表形式显示的菜单。
    Menu() {
      //展示菜单Menu中具体的item菜单项。
      MenuItem({
        content: '保存至相册',
      })
        .width(100)
        .height(50)
        .onClick(() => {
          http.createHttp().request(this.src,
            {
              method: http.RequestMethod.GET,
              connectTimeout: 60000,
              readTimeout: 60000
            },
            async (error: BusinessError, data: http.HttpResponse) => {
              if (error) {
                console.error(`http reqeust failed with. Code: ${error.code}, message: ${error.message}`);
              } else {
                if (ResponseCode.ResponseCode.OK === data.responseCode) {
                  let imageBuffer: ArrayBuffer = data.result as ArrayBuffer;
                  try {
                    const permissions: Array<Permissions> = ['ohos.permission.WRITE_IMAGEVIDEO'];
                    let atManager: abilityAccessCtrl.AtManager = abilityAccessCtrl.createAtManager();
                    // requestPermissionsFromUser会判断权限的授权状态来决定是否唤起弹窗
                    await atManager.requestPermissionsFromUser(getContext(this), permissions)
                    // 获取相册路径
                    const context = getContext(this);
                    let helper = photoAccessHelper.getPhotoAccessHelper(context);
                    let uri = await helper.createAsset(photoAccessHelper.PhotoType.IMAGE, 'jpg')
                    let file = await fs.open(uri, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE)
                    // 写入文件
                    await fs.write(file.fd, imageBuffer);
                    // 关闭文件
                    await fs.close(file.fd);
                    this.showMenu = false;

                  } catch (error) {
                    this.showMenu = false;
                    console.error("error is " + JSON.stringify(error))
                  }
                } else {
                  this.showMenu = false;
                  console.error('error occurred when image downloaded!')
                }
              }
            })
        })
    .width(150)
    .height(60)
  }

  build() {
    Column() {
      Web({ src: $rawfile("index.html"), controller: this.controller })//触发自定义弹窗
        .onContextMenuShow((event) => {
          if (event) {
            this.result = event.result
            this.src = event.param.getSourceUrl()
            console.info("x coord = " + event.param.x());
            console.info("link url = " + event.param.getLinkUrl());
            // 判断是否是图片
            console.info("src url = " + event.param.getSourceUrl());
            console.info("is image = " + event.param.existsImageContents());
            this.linkUrl = event.param.getLinkUrl();
          }
          console.info(TAG, `x: ${this.offsetX}, y: ${this.offsetY}`);
          this.showMenu = true;
          return true;
        })
        .bindPopup(this.showMenu,
          {
            builder: this.MenuBuilder(),
            enableArrow: false,
            placement: Placement.LeftTop,
            mask: false,
            onStateChange: (e) => {
              if (!e.isVisible) {
                this.showMenu = false;
                this.result!.closeContextMenu();
              }
            }
          })
        .draggable(false)
    }
  }
}

rawfile目录下index.html

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<body>
<h1>onContextMenuShow</h1>
<a href="http://www.example.com" style="font-size:27px">链接www.example.com</a>
<div><img src="https://res1.vmallres.com/pimages//uomcdn/CN/pms/202404/gbom/6942103121098/800_800_E02C87D685D08071877D20E410E8A04Emp.png"></div>
<p>选中文字鼠标右键弹出菜单</p>
</body>
</html>

这样，在web中，可以长按图片，弹窗提示下载，会获取到图片url，拿到图片url，通过http请求，将图片下载至相册。