压花标本怎么拍照记录HarmonyOS相机拍照实战如果你对压花艺术感兴趣可以去鸿蒙应用市场搜一下**「压花集」**下载下来体验体验。拍下花朵标本的照片记录压制过程建立自己的压花素材库。体验完了再回来看这篇文章你会更清楚相机拍照功能是怎么实现的。写在前面大家好我是一名写了十多年Web前端的老兵。这篇文章围绕压花集的标本拍照功能讲解HarmonyOS的相机API使用。这篇文章聊什么压花集的标本拍照功能核心要解决相机调用使用系统相机拍照照片保存保存到应用目录标本信息记录花材名称、采集日期等标本管理管理所有标本照片第一步设计标本数据结构// 压花标本interfacePressedFlower{id:string;name:string;// 花材名称photoUri:string;// 照片路径flowerType:string;// 花材类型color:string;// 颜色season:string;// 采集季节pressMethod:string;// 压制方法pressDays:number;// 压制天数collectDate:string;// 采集日期pressDate:string;// 开始压制日期completeDate:string;// 完成日期status:string;// 状态notes:string;createdAt:string;}// 花材类型constFLOWER_TYPES[{id:rose,name:玫瑰,color:#e11d48,season:春,pressDays:7},{id:lavender,name:薰衣草,color:#8b5cf6,season:夏,pressDays:5},{id:daisy,name:雏菊,color:#fbbf24,season:春,pressDays:4},{id:hydrangea,name:绣球花,color:#3b82f6,season:夏,pressDays:8},{id:cherry_blossom,name:樱花,color:#f9a8d4,season:春,pressDays:3},{id:maple,name:枫叶,color:#dc2626,season:秋,pressDays:6},{id:ginkgo,name:银杏叶,color:#eab308,season:秋,pressDays:5},{id:fern,name:蕨类,color:#22c55e,season:夏,pressDays:4},{id:baby_breath,name:满天星,color:#e5e7eb,season:四季,pressDays:3},{id:sunflower,name:向日葵,color:#f97316,season:夏,pressDays:10},];// 状态constWORK_STATUS[{id:collecting,name:采集中,color:#22c55e},{id:pressing,name:压制中,color:#3b82f6},{id:completed,name:已完成,color:#ec4899},];第二步实现相机拍照import{camera}fromkit.CameraKit;import{fileIo}fromkit.CoreFileKit;EntryComponentstruct FlowerCameraPage{StateisCameraReady:booleanfalseStatecapturedPhoto:stringStateisPreviewMode:booleantrueprivatecameraManager:camera.CameraManager|nullnullprivatecaptureSession:camera.CaptureSession|nullnullprivatephotoOutput:camera.PhotoOutput|nullnullasyncaboutToAppear(){awaitthis.initCamera()}aboutToDisappear(){this.releaseCamera()}asyncinitCamera(){try{this.cameraManagercamera.getCameraManager(getContext())constcamerasthis.cameraManager.getSupportedCameras()if(cameras.length0)returnconstconfigsthis.cameraManager.getSupportedOutputCapability(cameras[0])if(configs.length0)returnconstprofileconfigs[0]constpreviewOutputthis.cameraManager.createPreviewOutput(profile.previewProfiles[0],camera_preview)this.photoOutputthis.cameraManager.createPhotoOutput(profile.photoProfiles[0])this.captureSessionthis.cameraManager.createCaptureSession()this.captureSession.beginConfig()constcameraInputthis.cameraManager.createCameraInput(cameras[0])cameraInput.open()this.captureSession.addInput(cameraInput)this.captureSession.addOutput(previewOutput)this.captureSession.addOutput(this.photoOutput)awaitthis.captureSession.commitConfig()awaitthis.captureSession.start()this.isCameraReadytrue}catch(err){console.error(初始化相机失败:${err})}}asynctakePhoto(){if(!this.photoOutput)returntry{constphotoawaitthis.photoOutput.capture()photo.on(photoAvailable,async(err,photoResult){if(err)returnconstmainImagephotoResult.mainconstbufferawaitmainImage.readPixelsBuffer()constfileNameflower_${Date.now()}.jpgconstfilePath${getContext().filesDir}/${fileName}constfilefileIo.openSync(filePath,fileIo.OpenMode.CREATE|fileIo.OpenMode.WRITE_ONLY)fileIo.writeSync(file.fd,buffer)fileIo.closeSync(file)this.capturedPhotofilePaththis.isPreviewModefalse})}catch(err){console.error(拍照失败:${err})}}privatereleaseCamera(){if(this.captureSession){this.captureSession.release()this.captureSessionnull}}build(){Column(){if(this.isPreviewMode){XComponent({id:camera_preview,type:XComponentType.SURFACE,libraryname:}).width(100%).aspectRatio(4/3).backgroundColor(#000).borderRadius(12)Button(拍照).width(80).height(80).backgroundColor(#ec4899).borderRadius(40).margin({top:20}).enabled(this.isCameraReady).onClick(()this.takePhoto())}else{Image(this.capturedPhoto).width(100%).aspectRatio(4/3).objectFit(ImageFit.Cover).borderRadius(12)Row(){Button(重拍).layoutWeight(1).height(48).backgroundColor(#f3f4f6).fontColor(#374151).borderRadius(12).onClick((){this.isPreviewModetrue})Button(使用照片).layoutWeight(1).height(48).backgroundColor(#ec4899).borderRadius(12).margin({left:12})}.width(100%).margin({top:20})}}.padding(16)}}第三步保存标本信息import{preferences}fromkit.ArkData;asyncfunctionaddFlower(context:Context,flower:PressedFlower):Promiseboolean{constflowersawaitgetItemPressedFlower[](context,flowers,[]);constnewFlower:PressedFlower{...flower,id:flower_${Date.now()},createdAt:newDate().toISOString().slice(0,10)};flowers.push(newFlower);returnawaitsetItem(context,flowers,flowers);}asyncfunctiongetFlowers(context:Context):PromisePressedFlower[]{returnawaitgetItemPressedFlower[](context,flowers,[]);}asyncfunctionupdateFlowerStatus(context:Context,id:string,status:string):Promiseboolean{constflowersawaitgetItemPressedFlower[](context,flowers,[]);constindexflowers.findIndex(ff.idid);if(index-1)returnfalse;flowers[index].statusstatus;if(statuscompleted){flowers[index].completeDatenewDate().toISOString().slice(0,10);}returnawaitsetItem(context,flowers,flowers);}第四步常见问题4.1 相机权限问题调用相机报错。解决在module.json5里声明相机权限。4.2 照片质量问题照片不够清晰。解决调整相机分辨率设置。总结这篇文章围绕压花集的标本拍照功能讲解了相机使用ohos.camera API调用照片保存到应用目录数据管理标本信息存储状态追踪如果你对压花集感兴趣欢迎去鸿蒙应用市场搜索下载体验。
鸿蒙App开发--压花集怎么拍照记录?HarmonyOS相机拍照实战
发布时间:2026/6/9 20:49:47
压花标本怎么拍照记录HarmonyOS相机拍照实战如果你对压花艺术感兴趣可以去鸿蒙应用市场搜一下**「压花集」**下载下来体验体验。拍下花朵标本的照片记录压制过程建立自己的压花素材库。体验完了再回来看这篇文章你会更清楚相机拍照功能是怎么实现的。写在前面大家好我是一名写了十多年Web前端的老兵。这篇文章围绕压花集的标本拍照功能讲解HarmonyOS的相机API使用。这篇文章聊什么压花集的标本拍照功能核心要解决相机调用使用系统相机拍照照片保存保存到应用目录标本信息记录花材名称、采集日期等标本管理管理所有标本照片第一步设计标本数据结构// 压花标本interfacePressedFlower{id:string;name:string;// 花材名称photoUri:string;// 照片路径flowerType:string;// 花材类型color:string;// 颜色season:string;// 采集季节pressMethod:string;// 压制方法pressDays:number;// 压制天数collectDate:string;// 采集日期pressDate:string;// 开始压制日期completeDate:string;// 完成日期status:string;// 状态notes:string;createdAt:string;}// 花材类型constFLOWER_TYPES[{id:rose,name:玫瑰,color:#e11d48,season:春,pressDays:7},{id:lavender,name:薰衣草,color:#8b5cf6,season:夏,pressDays:5},{id:daisy,name:雏菊,color:#fbbf24,season:春,pressDays:4},{id:hydrangea,name:绣球花,color:#3b82f6,season:夏,pressDays:8},{id:cherry_blossom,name:樱花,color:#f9a8d4,season:春,pressDays:3},{id:maple,name:枫叶,color:#dc2626,season:秋,pressDays:6},{id:ginkgo,name:银杏叶,color:#eab308,season:秋,pressDays:5},{id:fern,name:蕨类,color:#22c55e,season:夏,pressDays:4},{id:baby_breath,name:满天星,color:#e5e7eb,season:四季,pressDays:3},{id:sunflower,name:向日葵,color:#f97316,season:夏,pressDays:10},];// 状态constWORK_STATUS[{id:collecting,name:采集中,color:#22c55e},{id:pressing,name:压制中,color:#3b82f6},{id:completed,name:已完成,color:#ec4899},];第二步实现相机拍照import{camera}fromkit.CameraKit;import{fileIo}fromkit.CoreFileKit;EntryComponentstruct FlowerCameraPage{StateisCameraReady:booleanfalseStatecapturedPhoto:stringStateisPreviewMode:booleantrueprivatecameraManager:camera.CameraManager|nullnullprivatecaptureSession:camera.CaptureSession|nullnullprivatephotoOutput:camera.PhotoOutput|nullnullasyncaboutToAppear(){awaitthis.initCamera()}aboutToDisappear(){this.releaseCamera()}asyncinitCamera(){try{this.cameraManagercamera.getCameraManager(getContext())constcamerasthis.cameraManager.getSupportedCameras()if(cameras.length0)returnconstconfigsthis.cameraManager.getSupportedOutputCapability(cameras[0])if(configs.length0)returnconstprofileconfigs[0]constpreviewOutputthis.cameraManager.createPreviewOutput(profile.previewProfiles[0],camera_preview)this.photoOutputthis.cameraManager.createPhotoOutput(profile.photoProfiles[0])this.captureSessionthis.cameraManager.createCaptureSession()this.captureSession.beginConfig()constcameraInputthis.cameraManager.createCameraInput(cameras[0])cameraInput.open()this.captureSession.addInput(cameraInput)this.captureSession.addOutput(previewOutput)this.captureSession.addOutput(this.photoOutput)awaitthis.captureSession.commitConfig()awaitthis.captureSession.start()this.isCameraReadytrue}catch(err){console.error(初始化相机失败:${err})}}asynctakePhoto(){if(!this.photoOutput)returntry{constphotoawaitthis.photoOutput.capture()photo.on(photoAvailable,async(err,photoResult){if(err)returnconstmainImagephotoResult.mainconstbufferawaitmainImage.readPixelsBuffer()constfileNameflower_${Date.now()}.jpgconstfilePath${getContext().filesDir}/${fileName}constfilefileIo.openSync(filePath,fileIo.OpenMode.CREATE|fileIo.OpenMode.WRITE_ONLY)fileIo.writeSync(file.fd,buffer)fileIo.closeSync(file)this.capturedPhotofilePaththis.isPreviewModefalse})}catch(err){console.error(拍照失败:${err})}}privatereleaseCamera(){if(this.captureSession){this.captureSession.release()this.captureSessionnull}}build(){Column(){if(this.isPreviewMode){XComponent({id:camera_preview,type:XComponentType.SURFACE,libraryname:}).width(100%).aspectRatio(4/3).backgroundColor(#000).borderRadius(12)Button(拍照).width(80).height(80).backgroundColor(#ec4899).borderRadius(40).margin({top:20}).enabled(this.isCameraReady).onClick(()this.takePhoto())}else{Image(this.capturedPhoto).width(100%).aspectRatio(4/3).objectFit(ImageFit.Cover).borderRadius(12)Row(){Button(重拍).layoutWeight(1).height(48).backgroundColor(#f3f4f6).fontColor(#374151).borderRadius(12).onClick((){this.isPreviewModetrue})Button(使用照片).layoutWeight(1).height(48).backgroundColor(#ec4899).borderRadius(12).margin({left:12})}.width(100%).margin({top:20})}}.padding(16)}}第三步保存标本信息import{preferences}fromkit.ArkData;asyncfunctionaddFlower(context:Context,flower:PressedFlower):Promiseboolean{constflowersawaitgetItemPressedFlower[](context,flowers,[]);constnewFlower:PressedFlower{...flower,id:flower_${Date.now()},createdAt:newDate().toISOString().slice(0,10)};flowers.push(newFlower);returnawaitsetItem(context,flowers,flowers);}asyncfunctiongetFlowers(context:Context):PromisePressedFlower[]{returnawaitgetItemPressedFlower[](context,flowers,[]);}asyncfunctionupdateFlowerStatus(context:Context,id:string,status:string):Promiseboolean{constflowersawaitgetItemPressedFlower[](context,flowers,[]);constindexflowers.findIndex(ff.idid);if(index-1)returnfalse;flowers[index].statusstatus;if(statuscompleted){flowers[index].completeDatenewDate().toISOString().slice(0,10);}returnawaitsetItem(context,flowers,flowers);}第四步常见问题4.1 相机权限问题调用相机报错。解决在module.json5里声明相机权限。4.2 照片质量问题照片不够清晰。解决调整相机分辨率设置。总结这篇文章围绕压花集的标本拍照功能讲解了相机使用ohos.camera API调用照片保存到应用目录数据管理标本信息存储状态追踪如果你对压花集感兴趣欢迎去鸿蒙应用市场搜索下载体验。