[转]VS2015 cordova尝试-camera

本文转自:http://blog.csdn.net/greystar/article/details/47973837

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

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

3.调用

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

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

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

<!-- Cordova 引用,它在生成应用程序时添加到其中。 -->     <script src="cordova.js"></script>     <script src="scripts/platformOverrides.js"></script>

<script src="scripts/index.js"></script>     //下面二行是示例用的,其他是模板自带,不需要调整, 不能直接控件事件调用 <  onclick="">     <input type="button" value="调用相机"  id="btntakeCamera"/>         <img id="takeImg" width="200" height="200" /> </body>

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

[javascript] view plaincopyprint?

  1. document.addEventListener("deviceready", onDeviceReady, false);
  2. function onDeviceReady() {
  3. document.getElementById("btntakeCamera").onclick = takeCamera;
  4. alert("设备初始化正常");
  5. }
  6. function takeCamera() {
  7. navigator.camera.getPicture(onSuccess, onFail, {
  8. quality: 50,
  9. destinationType: Camera.DestinationType.DATA_URL,
  10. encodingType: Camera.EncodingType.JPEG,
  11. targetWidth: 100,
  12. targetHeight: 100,
  13. });
  14. }
  15. function onSuccess(imageData) {
  16. var image = document.getElementById(‘takeImg‘);
  17. image.src = "data:image/jpeg;base64," + imageData;
  18. }
  19. function onFail(message) {
  20. alert(‘Failed because: ‘ + message);
  21. }
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 有详细介绍,繁体的帮助,大家应该都能看懂的。

时间: 2024-12-10 22:29:35

[转]VS2015 cordova尝试-camera的相关文章

VS2015 Cordova Ionic移动开发(一)

一.Windows环境配置 1.如果已经安装VS2015,打开[工具]-[选项]找到Cordova选项: 运行依赖关系查看器,用来检测开发环境是否完整. 如果检测显示: 那么就是环境配置完成了.可以直接开发了. 如果显示有错误页面,那么按照错误页面的提示,进行对应的环境配置即可. 一般错误页面提示都是缺少对应的依赖组件,包括如下: Git Node.js Android SDK JDK 这些组件可以在安装VS时选择安装,不过版本不是最新的.所以一般自己手动安装就行了. 截至本文发布前:VS201

vs2015 cordova环境安装

原文:vs2015 cordova环境安装 1.参照其他高手的来 http://www.songker.com/index.php/post/151.html VS2015安卓开发Apache Cordova环境安装 正常环境下,下面几个环境都安装成功了 jdk-7u55-windows-x64.exe Android SDK Tools Node.js apache-ant-1.9.3-bin 可以利用下面按钮检测缺失项: 注意点: Android Sdk包的下载,有可能老不完全 ?图中Obs

vs2015 cordova环境安装【个人遇到的几个问题】

原文:vs2015 cordova环境安装[个人遇到的几个问题] 问题1: vs2015,设置 ?Debug ?Android 设备[真机调试] Exception in thread "main"java.lang.RuntimeException: java.util.zip.ZipException: error in opening zipfile 下载这个包始终下载不下来, 解答1: 参考这个文档,http://www.ithao123.cn/content-10878480

VS2015+cordova+ionic安装配置

VS2015已经出了正式版,想用来试一下cordova方面的开发.最近在看ionic这个框架,于是想能在VS2015里编辑js就好了. 下面说一下蛋疼的安装配置过程. 一.安装VS2015及Android SDK 首先Android的SDK最好提前下好,我是从另一个电脑上把已经下好的sdk复制到D盘Android目录下,这样安装VS2015的时候就不用选择SDK下载了,速度会快点. 安装VS2015的时候最好网络FQ一下,不然有些组件有可能会下载失败.安装的组件我没选Xamarin,这玩意太贵用

Cordova - 安装camera插件之后编译错误解决方法!

安装camera插件之后,编译出错,错误截图如下: 刚开始以为是AAPT编译导致的,尝试关闭AAPT编译选项,但是不行,认真看了一下编译出错信息,应该是缺少文件导致的,随后在对应的目录中加入了缺失的文件,再次编译就可以了! 缺失文件名:camera_provider_paths.xml 存放路径:工程名称\TeacherManage\platforms\android\app\src\main\res\xml 文件内容: <?xml version="1.0" encoding=

VS2015 Cordova实现WebView加载页面进度条(Android)

因为使用Cordova做app时,加载页面没有进度条,用户无法感知打开进度,故加入进度条,具体实现如下: 1.  如果项目没有生成过apk,需先生成一次,这样在项目下面才会出现platforms/android的文件夹. 2.  进入项目/platforms/android/src文件夹下,在你程序包名目录下找到你的MainActivity.java文件,增加一个Dialog和ProgressBar用来显示页面加载进度,具体代码实现如下: 1 /* 2 Licensed to the Apach

Cordova+angularjs+ionic+vs2015开发(一)

欢迎加群学习:457351423 这里有4000多部学习视频,涵盖各种技术,有需要的欢迎进群学习! 一.Windows环境配置 1.如果已经安装VS2015,打开[工具]-[选项]找到Cordova选项: 运行依赖关系查看器,用来检测开发环境是否完整. 如果检测显示: 那么就是环境配置完成了.可以直接开发了. 如果显示有错误页面,那么按照错误页面的提示,进行对应的环境配置即可. 一般错误页面提示都是缺少对应的依赖组件,包括如下: Git Node.js Android SDK JDK 这些组件可

visual studio 2015 cordova部署

1:安装 今天安装了vs2015,尝试下cordova开发 vs2015安装非常慢,耐心等待. 安装完毕都会提示android sdk安装失败 国内环境,没办法. 我们打开android sdk manager 选择tools-options 悬在代理ip:mirrors.opencas.cn 端口 80 勾选 force https:// to be fetched using http:// 然后reload 如果代理还是不行的话,推荐一个网站 http://www.androiddevto

我用VS2015 开发webapp (1) 需求、目的、配置

分析需求: 1.要求数据分析 [门店销售数据分析] 2.数据要实时同步 3.数据要求安全并保密 4.数据分析图 开发工具的选择: VS2015 + Cordova + Angularjs + Ionic 配置环境 CMD-- node -v CMD-- npm -version 解决方法: 点击"Packages" > "Show Obsolete Packages"然后library就出来了 下面碎碎念: MD,我真不会啊.... 24K纯新手,这是多大坑啊