android—— cordova调用原生相机

2017-05-09  本文已影响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

上一篇下一篇

猜你喜欢

热点阅读