官网中有形容 camera 组件性能界面属性介绍，然而官网没有具体的 demo 让咱们感触拍照的性能，明天写一篇 demo 来欠缺一下拍照的性能
demo 性能如下
第一步首先进行拍照性能
第二步 进行 js 页面跳转性能
第三步 应用 image 显示拍照的照片
第一步首先进行拍照性能
参考链接如下
https://developer.harmonyos.c…
1.1 html 代码
<div class="container">
<camera id='camera-id' flash="on" deviceposition="back" @error="cameraError">
</camera>
<text class="textTakePhoto" on:click="takePhoto" > 拍照 </text>
</div>
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.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},
})
}
第三步 应用 image 显示拍照的照片
3.1 参考资料如下
https://developer.harmonyos.c…
3.2 怎么显示本地图片
Image 组件存在一个 src 假如为 internal://app/1.png
其实在门路是 file:///data/data/ 包名 /files/1.png
3.3 hml 代码
<div class="container">
<text>{{src}}</text>
<image src="{{src}}" style="width: 300px; height: 300px;">
</image>
</div>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/…