官网中有描述camera组件功能界面属性介绍，但是官网没有具体的demo让我们感受拍照的功能，今天写一篇demo来完善一下拍照的功能
demo 功能如下
第一步首先进行拍照功能
第二步 进行js页面跳转功能
第三步 使用image 显示拍照的照片
第一步首先进行拍照功能
参考链接如下
https://developer.harmonyos.c...
文章图片
1.1 html 代码
拍照 1.2 css 代码
···
.container {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
camera {
width: 100%;
height: 80%;
}
.textTakePhoto{
padding: 10px;
border-width: 2vp;
border-color: black;
border-bottom-style: solid;
border-radius: 90vp;
margin-top: 40px;
text-color: black;
font-family: sans-serif;
font-size: 25px;
}
1.3js 代码···export default {data: {title: 'World',src:""},cameraError(){},takePhoto(){var _this=this;
console.log('------------------------------>takePhoto')var camera = this.$element('camera-id')camera.takePhoto({quality:'high',success(result){_this. src=https://www.it610.com/article/result.uriconsole.log("拍照成功路径==>>"+_this.src);
//},fail(result){console.info('-------------fail------'+result)},complete(result){//console.info('-------------complete------'+result) }})}, }1.4 运行效果
文章图片
第二步 进行js页面跳转功能
我们可以在拍照中完成（complete）的时候进行跳转另外一个界面，然后对图片路径做出相应的处理
参考资料如下
https://developer.harmonyos.c...
文章图片
2.1代码如下
complete(result){console.info('-------------complete------'+result)var appsrc="file:///data/data/com.harmony.alliance.jsdemo/files/"var path="internal://app/"+_this.src.substring(appsrc.length,_this.src.length)console.info('-------------success------'+path )router.push({uri:"pages/myImage/myImage",params: {src: path},}) }
【【HarmonyOS】【JS】鸿蒙Js camera怎么拍照并使用image显示出来】第三步 使用image 显示拍照的照片
3.1 参考资料如下
https://developer.harmonyos.c...
文章图片
3.2怎么显示本地图片
Image组件存在一个src假设为internal://app/1.png
其真实路径是file:///data/data/包名 /files/1.png
3.3 hml代码
{{src}}
CSS代码
.container {display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
left: 0px;
top: 0px;
width: 454px;
height: 454px;
} .title {font-size: 30px;
text-align: center;
width: 200px;
height: 100px;
}
Js 代码
export default {data: {title: 'World',src:""}}3.4 运行效果
文章图片
==
文章图片
更多精彩内容，请见华为开发者官方论坛→https://developer.huawei.com/...
