美文网首页
android—— cordova调用原生相机

android—— cordova调用原生相机

作者: 这种事你也信以为真 | 来源:发表于2017-05-09 21:06 被阅读648次

    额。。相关的下载和集成就不说了,直接说说怎么调用原生相机吧。

    首先,先添加相关的插件

    cordova plugin add cordova-plugin-camera

    然后,瞅瞅自己插件有木有加进去

    cordova plugin list

    如果加进去了,是酱婶的~

    FEF5D853-3BCD-4079-8CF0-EBFB52CDB563.png

    备注:命令行记得切换到相应的工程下面哦~不然, 会出现
    Error: Current working directory is not a Cordova-based project.
    这样子的错误

    然后用androidstudio打开相应的工程(不用AS打开也可以),工程下面的 assets/www/js 这个文件夹下建一个 photo.js (名字任意取啦~) 。里面的内容是:

    document.addEventListener('deviceready', function () {
               document.getElementById('btn')
                   .addEventListener('click', capturePhoto);
                 });
    function capturePhoto(){
                    if (!navigator.camera) {
                        alert('camera:')
                    }
                    navigator.camera.getPicture(onSuccess, onFail, { quality: 50,
                                                    destinationType: Camera.DestinationType.DATA_URL}
                                                    );
                }
                //拍照成功
                function onSuccess(imageData){
                alert('拍照成功啦');
                    var image = document.getElementById('smallImage');
                        image.src = "data:image/jpeg;base64," + imageData;
                }
                function onFail(message){
                    alert('拍照失败:' + message);
                }
    

    然后,找到 index.html 修改body内容

    <body style="padding-top:50px">
        <button id="btn" style="font-size:23px;">拍摄照片</button> <br>
        <div>
            ![](img/logo.png)
        </div>
        </body>
    

    最后,记得加一行

    <script type="text/javascript" src="js/photo.js"></script>
    

    然后运行就可以拍照啦~
    虽然,运行出来以后觉得好容易,但是自己真正去动手的时候会出现好多问题。
    比如:我button加上 onclick="capturePhoto();" 以后一度报错,因为不是做前端的,也不是很具体知道为啥,后来在stackoverflow找到了类似的答案,试试跟着一起改啥的。
    主要是参考了cordova的官网和CSDN上的博客结合着起来看:
    http://blog.csdn.net/u013491677/article/details/51985390
    http://cordova.axuer.com

    相关文章

      网友评论

          本文标题:android—— cordova调用原生相机

          本文链接:https://www.haomeiwen.com/subject/tmditxtx.html