HarmonyOSJS鸿蒙Js camera怎么拍照并使用image显示出来

Posted 2022-05-16 华为开发者论坛

官网中有描述camera组件功能界面属性介绍，但是官网没有具体的demo让我们感受拍照的功能，今天写一篇demo来完善一下拍照的功能

demo 功能如下

第一步首先进行拍照功能

第二步 进行js页面跳转功能

第三步 使用image 显示拍照的照片

第一步首先进行拍照功能

参考链接如下

​​https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-media-camera-0000001051414121​​

​​​​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.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代码

<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 运行效果

==