鸿蒙next 带你玩转鸿蒙拍照和相册获取图片
前言导读
各位网友和同学，相信大家在开发app的过程中都有遇到上传图片到服务器的需求，我们一般是有两种方式，拍照获取照片或者调用相册获取照片，今天我们就分享一个小案例讲一下这两种情况的实现。废话不多说我们正式开始
效果图
nimg.cn/direct/f9b831e0d5cf41c484dd1fced7c58385.gif)
具体实现
export async function fileSelect(): Promise<string> {
let photoSelectOptions = new picker.PhotoSelectOptions();
photoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE;
photoSelectOptions.maxSelectNumber = 1;
let photoPicker = new picker.PhotoViewPicker();
try {
let photoSelectResult = await photoPicker.select(photoSelectOptions);
if (photoSelectResult && photoSelectResult.photoUris && photoSelectResult.photoUris.length > 0) {
let imgUri = photoSelectResult.photoUris[0];
if (imgUri.indexOf('media/Photo')<0) {
showToast($r('app.string.prompt_select_img'));
return '';
}
return photoSelectResult.photoUris[0];
} else {
return '';
}
} catch (err) {
Logger.error('SelectedImage failed', JSON.stringify(err));
return '';
}
}
export async function cameraSelect(cameraPosition: Array<camera.CameraPosition>,
mediaType: Array<cameraPicker.PickerMediaType>,context:Context): Promise<string> {
try {
let pickerProfile: cameraPicker.PickerProfile = { cameraPosition: cameraPosition[1] };
let pickerResult: cameraPicker.PickerResult = await cameraPicker.pick(context,
[mediaType[0]], pickerProfile);
let uri = pickerResult.resultUri;
return uri;
hilog.info(0x0000, ' ', "the pick pickerResult is:" + JSON.stringify(pickerResult));
} catch (error) {
let err = error as BusinessError;
Logger.error( `the pick call failed. error code: `);
return '';
}
}
界面实现
import { cameraPicker } from '@kit.CameraKit';
import { camera } from '@kit.CameraKit';
import { cameraSelect, fileSelect } from './Camerautils';
@Entry
@Component
struct Index {
@State imageUri: Resource | string | undefined = undefined;
private cameraPosition: Array<camera.CameraPosition> = [
camera.CameraPosition.CAMERA_POSITION_UNSPECIFIED, camera.CameraPosition.CAMERA_POSITION_BACK,
camera.CameraPosition.CAMERA_POSITION_FRONT, camera.CameraPosition.CAMERA_POSITION_FOLD_INNER
];
private mediaType: Array<cameraPicker.PickerMediaType> = [
cameraPicker.PickerMediaType.PHOTO, cameraPicker.PickerMediaType.VIDEO
];
selectImage() {
fileSelect().then((uri: string) => {
this.imageUri = uri || '';
});
}
openphoto(){
cameraSelect(this.cameraPosition,this.mediaType,getContext(this)).then((uri: string) => {
this.imageUri = uri || '';
});
}
build() {
Row() {
Column() {
Image(this.imageUri)
.height(200)
.alt($r('app.media.startIcon'))
Button("从相册获取")
.width(200)
.margin({ top: 20})
.onClick(()=>{
this.selectImage()
})
Button("拍照")
.width(200)
.margin({ top: 20})
.onClick(async () => {
this.openphoto()
})
}
.width('100%')
}
.height('100%')
}
}
我们在主界面写2个button来触发我们拍照动作和我们的从相册获取, 拍照的时候我们是需要去申请权限，获取到权限之后才能拍照拿到对应的照片。这里需要强调 无论是从相册获取照片还是拍照获取照片都是需要真机， 并且是next系统,鸿蒙4.2版本上面代码会报错api不同。我们拿到图片的uri然后通过赋值给我们的装饰器 ，来刷新我们image组件来显示。
最后总结
鸿蒙next 无论是拍照获取照片uri 还是从相册获取照片uri 都比较简单，大家有真机的可以去尝试，获取到照片然后提交给服务器把整个前后端的交互完善 。 如果有其他的需求方面可以在文章地下留言。老师看到了都会回复的，更多鸿蒙next 开发相关知识的学习和交流都可以关注我掘金专栏或者B站的课程。
如果需要学习更多鸿蒙的知识可以关注我B站教程
课程地址
B站课程地址：www.bilibili.com/cheese/play…
项目内容:
-
1 常用布局组件的学习
-
2 网络请求工具类封装
-
3 arkui 生命周期启动流程
-
4 日志工具类的封装
-
5 自定义组合组件的封装
-
6 路由导航跳转的使用
-
7 本地地数据的缓存 以及缓存工具类的封装
-
8 欢迎页面的实现
-
9 登录案例和自动登录效果实现
-
10 请求网络数据分页上拉加载 下拉刷新的实现
-
11 list数据懒加载实现
-
12 webview组件的使用
团队介绍
团队介绍：作者： 坚果派-徐庆 坚果派由坚果等人创建，团队由12位华为HDE以及若干热爱鸿蒙的开发者和其他领域的三十余位万粉博主运营。专注于分享 HarmonyOS/OpenHarmony，ArkUI-X，元服务，仓颉，团队成员聚集在北京，上海，南京，深圳，广州，宁夏等地，目前已开发鸿蒙 原生应用，三方库60+，欢迎进行课程，项目等合作。
原文地址：https://blog.csdn.net/xq610928/article/details/142445255
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！