鸿蒙开发者社区

WOT技术大会

公众号矩阵

移动端

视频课免费课排行榜短视频直播课软考学堂

全部课程软考华为认证厂商认证 IT技术 PMP项目管理免费题库

文章资源问答课堂专栏直播

51CTO

鸿蒙开发者社区

51CTO技术栈

51CTO官微

51CTO学堂

51CTO博客

CTO训练营

鸿蒙开发者社区订阅号

51CTO软考

51CTO学堂APP

51CTO学堂企业版APP

鸿蒙开发者社区视频号

51CTO软考题库

鸿蒙开发者社区

登录/注册
51CTO

中国优质的IT技术网站

51CTO博客

专业IT技术创作平台

51CTO学堂

IT职业在线教育平台

活动短视频专栏极客Show 鸿蒙技术特刊

HarmonyOS webView怎么加载应用沙箱内的图片

应用内嵌入的h5页面，怎么加载沙箱中的文件

HarmonyOS

2024-12-23 15:14:33

浏览

赞

收藏 0

回答 1

回答 1

按赞同

/

按时间

H5页面无法通过以"file:…"形式加载沙箱内图片，可以将图片转成base64字符串，传递给H5页面，参考代码如下：

import { common } from '@kit.AbilityKit';
import { util } from '@kit.ArkTS';
import { webview } from '@kit.ArkWeb';

@Entry
@Component
struct Page4 {
  webController: webview.WebviewController = new webview.WebviewController();
  @State test: Test = new Test()
  build() {
    Column(){
      Web({src:$rawfile('index2.html'),controller:this.webController})
        .javaScriptProxy({
          object: this.test,
          name: "picture",
          methodList: ["chosePicture"],
          controller: this.webController
        }).height("50%")
    }
  }
}

class Test{
  chosePicture() {
    let context = getContext(this) as common.UIAbilityContext
    let arrayBuff = context.resourceManager.getRawFileContentSync("startIcon.png")
    let base64helper = new util.Base64Helper()
    let base64string = base64helper.encodeToStringSync(arrayBuff,util.Type.MIME)
    console.debug(base64string)
    return base64string
  }
}


<!DOCTYPE html>
  <html lang="zh-CN">
  <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body>

  <button id="init" onclick="takePicture()">获取沙箱路径图片</button>
  <img src="" id="myImage" alt="">
  </body>
  </html>

  <script>
  function takePicture() {
    let s = 'data:image/png;base64,' + picture.chosePicture();
    console.log(s)
    document.getElementById('myImage').src =  s;
  }
  </script>
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.

回复

2024-12-23 19:12:20

如何写精华回答，获更多曝光？

发布

相关问题

Image组件如何读入沙箱内的图片

3977浏览 • 1回复待解决

HarmonyOS 在应用沙箱内创建目录失败

822浏览 • 1回复待解决

HarmonyOS Web 控件无法上传应用沙箱内的文件

585浏览 • 1回复待解决

HarmonyOS webview如何加载沙箱html

1351浏览 • 1回复待解决

Image如何加载应用沙箱路径下的图片资源

2686浏览 • 1回复待解决

HarmonyOS FilePreview无法打开沙箱内word文档

871浏览 • 1回复待解决

HarmonyOS 怎么把图片的PixelMap保存到应用沙箱中

780浏览 • 1回复待解决

HarmonyOS WebView 延迟加载图片

788浏览 • 1回复待解决

如何使用Image加载沙箱路径图片资源

2628浏览 • 2回复待解决

HarmonyOS 怎么将获取的pixelMap转为图片存入沙箱？

1579浏览 • 1回复待解决

把应用沙箱下的图片保存到图库

2300浏览 • 1回复待解决

HarmonyOS Web通过file协议加载应用沙箱文件失败

632浏览 • 1回复待解决

图片的同步加载怎么操作？

861浏览 • 1回复待解决

删除应用沙箱目录:应用沙箱目录可以删除吗？怎么调用api删除？

2506浏览 • 1回复待解决

HarmonyOS 应用沙箱中的图片如何获取到缩略图

812浏览 • 1回复待解决

HarmonyOS Web加载的网页怎么允许读取app沙箱路径下的文件

686浏览 • 1回复待解决

HarmonyOS webview如何播放本地沙箱视频

2868浏览 • 1回复待解决

HarmonyOS web加载沙箱文件失败

827浏览 • 1回复待解决

HarmonyOS web从本地沙箱加载

932浏览 • 1回复待解决

HarmonyOS webview加载富文本怎么自适应大小

780浏览 • 1回复待解决

HarmonyOS WebView无法加载h5页面中的图片

719浏览 • 1回复待解决

HarmonyOS 文件访问（fs）和webview加载本地资源是只支持沙箱路径吗，实际物理路径加载失败

673浏览 • 1回复待解决

HarmonyOS 应用中如何加载磁盘图片？

964浏览 • 1回复待解决

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

348浏览 • 1回复待解决

在项目里放一张图片然后绘制在canvas上是可以绘制出来的，但是如果把图片路径改成沙箱内的路径，绘制不成功

10087浏览 • 1回复待解决

提问

该提问已有0人参与，帮助了0人

相关讨论帖

WebView 中的图片不能被加载 0回复

WebView加载html图片不显示问题 1回复

Native保存图片到应用沙箱 0回复

HarmonyOs webview 加载本地html 6回复

【鸿蒙ArkTs】沙箱内sqlite数据库db文件导入导出 0回复

Copyright © 2005-2025 51CTO.COM 京ICP证060544版权所有未经许可请勿转载