HarmonyOS鸿蒙Next ArkWeb中如何加载并显示应用内置的图片?

HarmonyOS鸿蒙Next ArkWeb中如何加载并显示应用内置的图片? 我们的 HarmonyOS NEXT 应用中内置了不少图片.

而我们的大前端希望通过加载应用内图片的方式来避免 ArkWeb 引擎再去加载相同内容的图片, 用于提供 ArkWeb 的性能.

所以想问一下, ArkWeb 是否提供了一种接口, 可以拦截图片在 ArkWeb 内的加载, 在开启加载之后, 判断一下应用是否已经内置了该接口, 如果内置了的话, 就使用内置的, 否则就通过 ArkWeb 进行网络远程加载该图片?

当然, 所谓的内置, 并非专门为 Arkweb 而内置, 而是通过 native 和 web 共同的方式, native 内其它界面也会使用该图片.


更多关于HarmonyOS鸿蒙Next ArkWeb中如何加载并显示应用内置的图片?的实战教程也可以访问 https://www.itying.com/category-93-b0.html

10 回复 
import { BusinessError } from '@kit.BasicServicesKit'
import { webview } from '@kit.ArkWeb'
import fs from '@ohos.file.fs';
import { common } from '@kit.AbilityKit';

@Entry
@Component
struct Index {
  webviewController: webview.WebviewController = new webview.WebviewController()
  context = this as common.UIAbilityContext;

  aboutToAppear() {
    // 配置Web开启调试模式
    webview.WebviewController.setWebDebuggingAccess(true);
  }

  hasFile(filePath: string){
    return fs.accessSync(filePath)
  }

  async getFile(url : string) {
    // const regex = new RegExp('/[^/]+/g', 'gim');
    // console.log(url+" 123456")

    // const fileName = url.match(regex);
    // const fileName = url.split("/").pop();
    // 根据url映射fileName
    const fileName = 'demo.JPG';
    const filePath = this.context.cacheDir + '/' + fileName;
    const flag=this.hasFile(filePath);
    if(!flag){
      await this.syncImage(filePath, fileName);
    }
    let file = await fs.openSync(filePath, fs.OpenMode.READ_ONLY);
    return file.fd;
  }

  async syncImage(filePath: string, fileName: string) {
    this.context.resourceManager.getRawFileContent(fileName, (err: BusinessError, data: Uint8Array) => {
      if (err != null) {
        console.error(`open ${fileName} failed: ${err.message}`)
      } else {
        let buffer = data.buffer
        let file = fs.openSync(filePath, fs.OpenMode.CREATE | fs.OpenMode.READ_WRITE)
        try {
          fs.writeSync(file.fd, buffer)
          fs.close(file.fd)
        } catch (err) {
          console.error(`write file error, ${JSON.stringify(err)}`)
        }
      }
    })
  }

  build() {
    Column() {
      // 以下URL为示例URL，需手动替换
      Web({ src: $rawfile('index.html'), controller: this.webviewController })
        .fileAccess(true)
        .imageAccess(true)
        .onlineImageAccess(true)
        .onInterceptRequest((event) => {
          if (event) {
            console.log('url123456:' + event.request.getRequestUrl())
          }
          const url = event!.request.getRequestUrl();
          if (!url.endsWith(".jpg")) return null;
          // 判断是否需要拦截替换

          let responseWeb: WebResourceResponse = new WebResourceResponse()
          try {
            // const responseweb = new WebResourceResponse();
            this.getFile(url).then(fd => {
              responseWeb.setResponseData(fd);
              responseWeb.setResponseCode(200);
              responseWeb.setReasonMessage('OK');
              responseWeb.setResponseIsReady(true);
            });
            responseWeb.setResponseMimeType('image/*');
            responseWeb.setResponseIsReady(false);
            console.log(`setResponseData: ${responseWeb.getResponseData().toString}`)
            return responseWeb;
          } catch (error) {
            console.error(`[Demo]Code: ${error.code},Message: ${error.message} `);
            return null
          }
        })
    }
  }
}

更多关于HarmonyOS鸿蒙Next ArkWeb中如何加载并显示应用内置的图片?的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


思路挺好, 如果是匹配 $r 资源呢?

resourceManger有针对$r不同类型资源提供的获取文件方式，比如media 链接，

setImageCacheCount可以设置内存中缓存解码后图片的数量上限，搭配ArkWeb的cacheMode优先使用cache中的资源

找HarmonyOS工作还需要会Flutter的哦，有需要Flutter教程的可以学学大地老师的教程，很不错，B站免费学的哦：BV1S4411E7LY/?p=17

并没有解决我的问题. 我的问题是 web 中的资源 url 匹配上 hap 内置的资源. 从而直接显示内置 png 而无需从网络下载.

按你的说法，web的资源url是网络资源，hap内置的资源是应用资源，路径都不一样，怎么匹配呢。

这个我们是有方式映射到的, 倒不用担心.

在HarmonyOS鸿蒙Next中，使用ArkWeb加载并显示应用内置的图片可以通过以下步骤实现：

  1. 图片资源放置：将图片资源放置在应用的resources目录下，通常放在resources/base/media文件夹中。

  2. 图片资源引用：在resources/base/element目录下的string.json文件中，定义图片资源的引用路径。例如：

    {
  "name": "my_image",
  "value": "$media:my_image"
}

  3. ArkTS代码中加载图片：在ArkTS代码中，使用Image组件加载并显示图片。例如：

    [@Entry](/user/Entry)
[@Component](/user/Component)
struct MyComponent {
  build() {
    Column() {
      Image($r('app.media.my_image'))
        .width(100)
        .height(100)
    }
  }
}

  4. Web组件中显示图片：如果需要在ArkWeb中显示图片，可以使用<img>标签，并通过src属性引用图片资源。例如：

    <img src="resources/base/media/my_image.png" alt="My Image" />

  5. 动态加载图片：如果需要动态加载图片，可以使用fetch或XMLHttpRequest获取图片数据，然后通过Blob或Base64方式显示图片。例如：

    fetch('resources/base/media/my_image.png')
  .then(response => response.blob())
  .then(blob => {
    const img = document.createElement('img');
    img.src = URL.createObjectURL(blob);
    document.body.appendChild(img);
  });

在HarmonyOS鸿蒙Next的ArkWeb中加载并显示应用内置图片，可以通过以下步骤实现：

  1. 图片资源存放：将图片资源放置在resources/base/media目录下。
  2. 资源引用：在ArkWeb的HTML文件中，使用<img>标签引用图片资源，路径格式为./media/your_image.png。
  3. 加载显示：确保图片路径正确，ArkWeb会在运行时自动加载并显示内置图片。

示例代码：

<img src="./media/example.png" alt="Example Image">

这样可以确保图片在应用中被正确加载和显示。

回到顶部