【坚果派】HarmonyOS 以及OpenHarmony中如何选择图片，并显示在桌面上
1.导入选择器模块。
代码语言：javascript复制import picker from '@ohos.file.picker';
2.创建图库选择选项实例。
代码语言：javascript复制const photoSelectOptions = new picker.PhotoSelectOptions();
3.选择媒体文件类型和选择媒体文件的最大数目。
以下示例以图片选择为例，媒体文件类型请参见PhotoViewMIMETypes。
代码语言：javascript复制photoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE; // 过滤选择媒体文件类型为IMAGE
photoSelectOptions.maxSelectNumber = 5; // 选择媒体文件的最大数目
4.创建图库选择器实例，调用select()接口拉起FilePicker界面进行文件选择。
文件选择成功后，返回PhotoSelectResult结果集，可以根据结果集中URI进行文件读取等操作。
代码语言：javascript复制let uri = null;
const photoPicker = new picker.PhotoViewPicker();
photoPicker.select(photoSelectOptions).then((photoSelectResult) => {
uri = photoSelectResult.photoUris[0];
}).catch((err) => {
console.error(`Invoke photoPicker.select failed, code is ${err.code}, message is ${err.message}`);
})
5.待界面从FilePicker返回后，在其他函数中使用fs.openSync接口，通过uri打开这个文件得到fd。
代码语言：javascript复制let file = fs.openSync(uri, fs.OpenMode.READ_WRITE);
console.info('file fd: ' file.fd);
6.通过fd使用fs.writeSync接口对这个文件进行编辑修改，编辑修改完成后关闭fd。
代码语言：javascript复制et writeLen = fs.writeSync(file.fd, 'hello, world');
console.info('write data to file succeed and size is:' writeLen);
fs.closeSync(file);
完整代码
代码语言：javascript复制import picker from '@ohos.file.picker';
@Entry
@Component
struct SelectPhotoPage {
@State imgDatas: string[] = [];
scroller: Scroller = new Scroller()
// 获取照片url集
async getAllImg() {
//
let photoPicker = new picker.PhotoViewPicker();
let result = new Array<string>();
try {
let PhotoSelectOptions = new picker.PhotoSelectOptions();
PhotoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE;
PhotoSelectOptions.maxSelectNumber = 5;
let photoPicker = new picker.PhotoViewPicker();
photoPicker.select(PhotoSelectOptions).then((PhotoSelectResult) => {
this.imgDatas = PhotoSelectResult.photoUris;
console.info('PhotoViewPicker.select successfully, PhotoSelectResult uri: ' JSON.stringify(PhotoSelectResult));
}).catch((err) => {
console.error(`PhotoViewPicker.select failed with. Code: ${err.code}, message: ${err.message}`);
});
} catch (err) {
console.error(`PhotoViewPicker failed with. Code: ${err.code}, message: ${err.message}`);
}
}
// 使用imgDatas的url加载图片。
build() {
Column() {
Text("选择图片").fontSize(36).fontColor(Color.Orange).onClick(() => {
//获取图库的所有图片url，存在imgDatas中
this.getAllImg()
})
if (this.imgDatas.length> 0) {
Button('next page').onClick(() => { // 点击后滑到下一页
this.scroller.scrollPage({ next: true })
})
Button('scroll 150')
.onClick(() => { // 点击后下滑指定距离150.0vp
this.scroller.scrollBy(0, 150)
})
Button('scroll 100')
.onClick(() => { // 点击后滑动到指定位置，即下滑100.0vp的距离
this.scroller.scrollTo({ xOffset: 0, yOffset: this.scroller.currentOffset().yOffset 100 })
})
Button('back top')
.onClick(() => { // 点击后回到顶部
this.scroller.scrollEdge(Edge.Top)
})
}
Scroll(this.scroller) {
Column() {
ForEach(this.imgDatas, item => {
Image(item)
.width(200).borderRadius(20).margin(5)
}, item => JSON.stringify(item))
}.width('100%')
}
.scrollable(ScrollDirection.Vertical) // 滚动方向纵向
.scrollBar(BarState.On) // 滚动条常驻显示
.scrollBarColor(Color.Gray) // 滚动条颜色
.scrollBarWidth(10) // 滚动条宽度
.edgeEffect(EdgeEffect.None)
.height("80%")
.margin({
bottom: 20
})
}.width('100%').height('100%')
}
}
