关于android:HarmonyOSJS鸿蒙Js-camera怎么拍照并使用image显示出来

官网中有形容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/...