webview如何拦截图片加载，使用本地缓存资源？

{
  "mappings": [
    {
      "url": "https://example.com/images/logo.png",
      "local": "entry/resources/base/media/web_cache/logo.png"
    },
    {
      "url": "https://example.com/images/banner.jpg",
      "local": "entry/resources/base/media/web_cache/banner.jpg"
    }
  ]
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

import web_webview from '@ohos.web.webview';
import fileio from '@ohos.fileio';

class WebResourceInterceptor {
  private imageMappings: Map<string, string> = new Map();

  constructor() {
    this.loadImageMappings();
  }

  private loadImageMappings() {
    try {
      const context = getContext(this) as common.UIAbilityContext;
      const profile = context.resourceManager.getRawFileContentSync('image_mapping.json');
      const jsonStr = String.fromCharCode.apply(null, new Uint8Array(profile));
      const config = JSON.parse(jsonStr);
      
      config.mappings.forEach(item => {
        this.imageMappings.set(item.url, item.local);
      });
    } catch (e) {
      console.error('Load image mappings failed:', e);
    }
  }

  setupInterceptor(webview: web_webview.WebviewController) {
    webview.onInterceptRequest((event) => {
      const url = event.request.getRequestUrl();
      
      // 检查是否是图片请求且在我们的映射表中
      if (this.isImageRequest(url) && this.imageMappings.has(url)) {
        const localPath = this.imageMappings.get(url);
        try {
          const context = getContext(this) as common.UIAbilityContext;
          const fd = context.resourceManager.getRawFd(localPath);
          const fileStream = fileio.createStreamSync(fd);
          
          // 构建响应
          const response = new web_webview.WebResourceResponse();
          response.setResponseData(fileStream);
          response.setResponseMimeType(this.getMimeType(url));
          response.setResponseEncoding('identity');
          response.setResponseCode(200);
          response.setReasonPhrase('OK');
          
          return response;
        } catch (e) {
          console.error('Load local image failed:', e);
          return null; // 回退到网络加载
        }
      }
      return null; // 其他请求不拦截
    });
  }

  private isImageRequest(url: string): boolean {
    return /\.(jpg|jpeg|png|gif|webp)(\?.*)?$/i.test(url);
  }

  private getMimeType(url: string): string {
    if (url.endsWith('.png')) return 'image/png';
    if (url.endsWith('.jpg') || url.endsWith('.jpeg')) return 'image/jpeg';
    if (url.endsWith('.gif')) return 'image/gif';
    if (url.endsWith('.webp')) return 'image/webp';
    return 'application/octet-stream';
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.

import web_webview from '@ohos.web.webview';

@Entry
@Component
struct WebPage {
  controller: web_webview.WebviewController = new web_webview.WebviewController();
  interceptor: WebResourceInterceptor = new WebResourceInterceptor();

  aboutToAppear() {
    this.interceptor.setupInterceptor(this.controller);
  }

  build() {
    Column() {
      Web({
        src: 'https://example.com',
        controller: this.controller
      })
    }
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.

async updateMappingsFromServer() {
  try {
    const http = new http.Http();
    const response = await http.request(
      'https://your-server.com/api/image_mappings',
      { method: 'GET' }
    );
    
    const newMappings = JSON.parse(response.result);
    this.imageMappings.clear();
    
    newMappings.mappings.forEach(item => {
      this.imageMappings.set(item.url, item.local);
    });
    
    // 可以存储到本地，下次启动时直接读取
    const preferences = await data_preferences.getPreferences(getContext(this), 'web_cache');
    await preferences.put('image_mappings', JSON.stringify(newMappings));
  } catch (e) {
    console.error('Update mappings failed:', e);
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.

private async preloadImages() {
  const context = getContext(this);
  const imageCache = new Map<string, ArrayBuffer>();
  
  for (const [url, localPath] of this.imageMappings) {
    try {
      const fd = context.resourceManager.getRawFd(localPath);
      const fileContent = fileio.readSync(fd);
      imageCache.set(url, fileContent.buffer);
    } catch (e) {
      console.error(`Preload ${localPath} failed:`, e);
    }
  }
  
  return imageCache;
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.