【HarmonyOS】【JS】鸿蒙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/...