admin
官网中有描述camera组件功能界面属性介绍，但是官网没有具体的demo让我们感受拍照的功能，今天写一篇demo来完善一下拍照的功能
demo 功能如下
第一步首先进行拍照功能
第二步 进行js页面跳转功能
第三步 使用image 显示拍照的照片
第一步首先进行拍照功能
参考链接如下
https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-media-camera-0000001051414121
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.3 js 代码
···
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=result.uri
console.log("拍照成功路径==>>"+_this.src);
//
},
fail(result){
console.info('-------------fail------'+result)
},
complete(result){
// console.info('-------------complete------'+result)
}
})
},
}
1.4 运行效果
第二步 进行js页面跳转功能
我们可以在拍照中完成（complete）的时候进行跳转另外一个界面，然后对图片路径做出相应的处理
参考资料如下
https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-apis-basic-features-routes-0000000000611824
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
},
})
}
第三步 使用image 显示拍照的照片
3.1 参考资料如下
https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-basic-image-0000000000611597
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/consumer/cn/forum/home?ha_source=sanfang