HarmonyOS 鸿蒙Next怎么image显示本地沙箱图片
HarmonyOS 鸿蒙Next怎么image显示本地沙箱图片 怎么用Image加载沙箱里的本地图片呢,我这边把沙箱路经放在image不显示
data/storage/el2/base/haps/entry/files/HDImageFiles/mmexport1704248711480.jpg
使用
fileUri.getUriFromPath(path)将沙箱路径转为uri试试
更多关于HarmonyOS 鸿蒙Next怎么image显示本地沙箱图片的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
我把沙箱路径改为URI没用,改为PixelMap 后才有用。不知什么原因,
好用啊,为什么没用呢,
怎么改为PixelMap ?
可以用PixelMap方式显示
```typescript
getImagePixelMap(imgPath: string) {
return new Promise((resolve, reject) => {
const imageSource = image.createImageSource(imgPath);
// 图片解码选项
let decodingOptions = {
editable: false,
desiredPixelFormat: 3
};
// 创建像素地图
imageSource.createPixelMap(decodingOptions).then((mPixelMap) => {
resolve(mPixelMap);
});
});
}
整明白了,只需要加一句fileuri.getUriFromPath
格式化沙箱地址就可以了,
是输入沙箱地址然后这个方法的返回值就可以直接展示吗
Image组件只支持uri,不支持path,沙箱路径是个path,getUriFromPath方法可以将Path转换成Uri供Image组件读取,
那麻烦了,我试了一下只能把沙箱地址利用fs.openSync拷贝一份得到新地址,然后再利到pixelMap来显示。
import picker from '@ohos.file.picker';
import fs from '@ohos.file.fs';
import { common } from '@kit.AbilityKit';
import image from '@ohos.multimedia.image';
@Entry
@Component
struct Page137 {
@State mPixelMap: PixelMap[] = []
// 弹出图片选择器方法
async openPicker() {
try {
// 设置图片选择器选项
const photoSelectOptions = new picker.PhotoSelectOptions();
// 限制只能选择一张图片
photoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE;
photoSelectOptions.maxSelectNumber = 1;
// 创建并实例化图片选择器
const photoViewPicker = new picker.PhotoViewPicker();
// 选择图片并获取图片URI
let uris: picker.PhotoSelectResult = await photoViewPicker.select(photoSelectOptions);
if (!uris || uris.photoUris.length === 0) return;
// 获取选中图片的第一张URI
let uri: string = uris.photoUris[0];
// 打开文件读取流
let file = fs.openSync(uri, fs.OpenMode.READ_ONLY);
// 获取当前上下文
let context = getContext(this) as common.UIAbilityContext;
// 新建一个保存裁剪后图片的路径
let newUrl = context.filesDir + '/test' + new Date().getTime() + '.jpg';
// 复制图片到新的路径
fs.copyFileSync(file.fd, newUrl);
// 关闭文件读取流
fs.closeSync(file);
// 图片更改时触发的方法
this.imgChange(newUrl);
} catch (e) {
console.error('openPicker', JSON.stringify(e));
}
}
// 图片更改处理方法
async imgChange(imgUri: string) {
try {
// 创建图片源对象
const imageSource: image.ImageSource = image.createImageSource(imgUri);
// 图片解码选项
let decodingOptions: image.DecodingOptions = {
editable: true,
desiredPixelFormat: 3,
};
// 创建像素地图
let mPixelMap: image.PixelMap = await imageSource.createPixelMap(decodingOptions);
mPixelMap
// 获取图片信息
// let mImageInfo: image.ImageInfo = await mPixelMap.getImageInfo();
this.mPixelMap = []
this.mPixelMap.push(mPixelMap)
} catch (e) {
console.error('imgChange', JSON.stringify(e));
}
}
build() {
Column() {
Button('选择图片→').onClick(() => {
this.openPicker();
});
if (this.mPixelMap.length > 0) {
Text('原始图片↓');
Image(this.mPixelMap[0])
.width('180lpx')
.height('180lpx')
.objectFit(ImageFit.Contain);
}
}
.width('100%');
}
}
好吧,感谢,
建议通过 getContext().filesDir + fileName
的形式获取文件路径,并赋值给页面变量 this.filePath
Image
文件路径前需要加上 文件协议 即: Image('file://' + this.filePath)
我想知道怎么把图片放到沙箱目录去
context.filesDir 这个不难,
这个是获取沙箱的路径吧。 我想知道本地比如 media里面的png 怎么放到沙箱里面去,
API 11 真机 Mate 60 pro
沙箱地址: file://media/Photo/104/IMG_1716181434_090/screenshot_20240520_130214.jpg
```javascript
import picker from '[@ohos](/user/ohos).file.picker';
[@Entry](/user/Entry)
[@Component](/user/Component)
struct Page137 {
// 状态变量:原始图片的URI
[@State](/user/State) imgOriginal: string = '';
// 弹出图片选择器方法
async openPicker() {
try {
// 设置图片选择器选项
const photoSelectOptions = new picker.PhotoSelectOptions();
// 限制只能选择一张图片
photoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE;
photoSelectOptions.maxSelectNumber = 1;
// 创建并实例化图片选择器
const photoViewPicker = new picker.PhotoViewPicker();
// 选择图片并获取图片URI
let uris: picker.PhotoSelectResult = await photoViewPicker.select(photoSelectOptions);
if (!uris || uris.photoUris.length === 0) return;
// 获取选中图片的第一张URI
let uri: string = uris.photoUris[0];
console.info('沙箱地址:', uri)
// 更新状态变量:保存原始图片的URI
this.imgOriginal = uri;
} catch (e) {
console.error('openPicker', JSON.stringify(e));
}
}
build() {
Column() {
Button('选择图片→').onClick(() => {
this.openPicker();
});
if (this.imgOriginal) {
Text('原始图片↓');
Image(this.imgOriginal)
.width('180lpx')
.height('180lpx')
.objectFit(ImageFit.Contain);
}
}
.width('100%');
}
}
哥子我的需求是获取APP自已沙箱里的图片然后显示在Image里
```plaintext
context.filesDir
data/storage/el2/base/haps/entry/files/HDImageFiles/mmexport1704248711480.jpg
找了下说通过fileuri.getUriFromPath转换也不行,
测试了可以的,
奇怪,我的不行呢!用的模拟器 api11,
在HarmonyOS(鸿蒙)系统中,若想在应用内显示本地沙箱中的图片,通常需要使用鸿蒙提供的API来实现图片的加载和显示。以下是一个基本的实现思路:
-
获取图片路径:首先,确保你已知晓本地沙箱中图片的存储路径。这个路径通常是应用私有存储空间内的某个位置。
-
使用Image组件:在鸿蒙的页面中,使用
<Image>
组件来显示图片。在<Image>
组件中,通过src
属性指定图片的URI。 -
URI转换:如果图片路径是文件路径,需要将其转换为URI格式。鸿蒙提供了相应的API来进行这种转换,例如使用
FileProvider
(如果鸿蒙有类似Android的FileProvider机制,具体需查阅鸿蒙文档)或者其他鸿蒙提供的文件访问API。 -
权限管理:确保应用具有访问该图片的权限。在鸿蒙系统中,权限管理通常需要在manifest文件中声明,并在运行时请求(如果必要)。
-
布局与显示:将配置好的
<Image>
组件放入页面的布局文件中,鸿蒙系统会负责将其渲染出来。
示例代码(伪代码,具体实现需查阅鸿蒙开发文档):
<Image
ohos:id="$+id:my_image"
ohos:width="match_parent"
ohos:height="wrap_content"
ohos:src="file:///path/to/your/image.jpg" /> <!-- 确保路径正确且已转换为URI -->
``
如果问题依旧没法解决请联系官网客服, 官网地址是 [https://www.itying.com/category-93-b0.html](https://www.itying.com/category-93-b0.html)