VS2015 cordova尝试-camera

最新推荐文章于 2025-03-27 16:30:45 发布

greystar

最新推荐文章于 2025-03-27 16:30:45 发布

阅读量4.9k

点赞数 1

分类专栏：移动应用 JS 文章标签： cordova plugin camera

本文链接：https://blog.csdn.net/greystar/article/details/47973837

版权

JS 同时被 2 个专栏收录

14 篇文章

订阅专栏

移动应用

1 篇文章

订阅专栏

1. 确保环境正常，如出现错误，安下载android sdk 相关版本，我在这上面也折腾了几天。

2.创建一个默认cordova 工程，并添加相关插件，在工程目录里打开config.xml 会打开配置界面，可选择camera插件，选安装即可。

3.调用

注：不能在html中设置事件调用

打开 www\index.html,做个界面的DEMO

<body>
<p>Hello，你的应用程序已准备就绪!</p>

<script src="cordova.js"></script>
    <script src="scripts/platformOverrides.js"></script>

增加JS 调用，这里就直接修改index.js 了

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    document.getElementById("btntakeCamera").onclick = takeCamera;
    alert("设备初始化正常");
}
function takeCamera() {
    navigator.camera.getPicture(onSuccess, onFail, {
        quality: 50,
        destinationType: Camera.DestinationType.DATA_URL,
        encodingType: Camera.EncodingType.JPEG,
        targetWidth: 100,
        targetHeight: 100,
    });
}
function onSuccess(imageData) {
    var image = document.getElementById('takeImg');
    image.src = "data:image/jpeg;base64," + imageData;
}

function onFail(message) {
    alert('Failed because: ' + message);
}

camera 的具体参数在 plugins\cordova-plugin-camera \doc\zh\index.md 有详细介绍，繁体的帮助，大家应该都能看懂的。

4.效果如下：