【HarmonyOS】【JS】鸿蒙Js camera怎么拍照并使用image显示出来

admin 2022年 01月 22 日

阅读选项

官网中有描述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