本文转自: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  了

  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 有详细介绍,繁体的帮助,大家应该都能看懂的。

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

  1. VS2015 Cordova Ionic移动开发(一)

    一.Windows环境配置 1.如果已经安装VS2015,打开[工具]-[选项]找到Cordova选项: 运行依赖关系查看器,用来检测开发环境是否完整. 如果检测显示: 那么就是环境配置完成了.可以直 ...

  2. [转]VS2015 Cordova Ionic移动开发(一)

    本文转自:https://www.cnblogs.com/UltimateAvalon/p/5328642.html 一.Windows环境配置 1.如果已经安装VS2015,打开[工具]-[选项]找 ...

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

    原文:vs2015 cordova环境安装[个人遇到的几个问题] 问题1: vs2015,设置  Debug  Android 设备[真机调试] Exception in thread "m ...

  4. vs2015 cordova环境安装

    原文:vs2015 cordova环境安装 1.参照其他高手的来 http://www.songker.com/index.php/post/151.html VS2015安卓开发Apache Cor ...

  5. VS2015+cordova+ionic安装配置

    VS2015已经出了正式版,想用来试一下cordova方面的开发.最近在看ionic这个框架,于是想能在VS2015里编辑js就好了. 下面说一下蛋疼的安装配置过程. 一.安装VS2015及Andro ...

  6. VS2015 + Cordova Html5开发使用Crosswalk Web引擎

    CrossWalk引擎的好处是统一不同android设备的Html5的差异性,据说速度很快. Vs2015中使用非常简单,作为一个Apache Cordova的插件安装即可: Installing t ...

  7. VS2015 Cordova Ionic移动开发(三)

    一.基础设置 1.修改App名称和程序起始页 打开config.xml配置文件显示如下,在[通用]选项卡中,将显示名称和起始页,修改为自己想要的名称即可. 如需直接在xml文件中修改:右击config ...

  8. VS2015 Cordova Ionic移动开发(二)

    一.创建空白Cordova应用 打开VS,选择[新建项目],选择其它语言JavaScript或者TypeScript,语言的话就按个人喜好,喜欢JS就用JS,喜欢TS就用TS,推荐使用TS书写,代码结 ...

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

    安装camera插件之后,编译出错,错误截图如下: 刚开始以为是AAPT编译导致的,尝试关闭AAPT编译选项,但是不行,认真看了一下编译出错信息,应该是缺少文件导致的,随后在对应的目录中加入了缺失的文 ...

随机推荐

  1. 与众不同 windows phone (47) - 8.0 其它: 锁屏信息和锁屏背景, 电池状态, 多分辨率, 商店, 内置协议, 快速恢复

    [源码下载] 与众不同 windows phone (47) - 8.0 其它: 锁屏信息和锁屏背景, 电池状态, 多分辨率, 商店, 内置协议, 快速恢复 作者:webabcd 介绍与众不同 win ...

  2. 强大的修改数据库修改语句ALTER TABLE(一)[20160712]

    今天开始的时间比昨天晚,其实午休的时间是差不多的,只是起来后稍微看了一点新闻,10分钟时间就没有了,所以要养成一个好习惯还真不容易,另外就是工作时间少看新闻,太浪费时间. 昨天在执行一个alter S ...

  3. windows临界区

    临界区: 临界区是一种轻量级机制,在某一时间内只允许一个线程执行某个给定代码段.通常在多线程修改全局数据时会使用临界区.事件.信号量也用于多线程同步,但临界区与它们不同,并不总是执行向内核模式的切换, ...

  4. eclipse:File->New没有Android Application Project的解决办法

    我的Eclipse版本是:Kepler Service Release 1,截图: 解决步骤: 1.单击Window,选择Customize Perspective,如图: 2.勾选Android A ...

  5. 关于IE中通过http-equiv="X-UA-Compatible指定文件兼容性模式

    .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier ...

  6. [经验][JS]如何观察网站,进而模仿

    应该存在着一类人: 1.看到美丽的网站时,就会F12,看看他是怎么实现的 2.看到网站数据是自己需要的时候,就会F12,看看他是怎么拿到数据的 3.看到网站一个有趣的模块时,,就会F12,看看他是怎么 ...

  7. WampServer搭建php环境可能遇到的问题

    WampServer搭建php环境可能遇到的问题 1.安装时报错,缺少 MSVCR100.dll 文件 这是因为wampServer安装时用到的vc库没有更新,要安装更新之后再进行安装,因为之前安装的 ...

  8. NPOI Excel类

    using System;using System.Collections.Generic;using System.Linq;using System.Text;using NPOI.HSSF.Us ...

  9. C# DevExpress 的gridControl或gridView数据导出失败解决方法

    来自:http://blog.csdn.net/lybwwp/article/details/8049464 谢谢 在使用DevExpress 的GridPanel控件的时候出现了一个莫名其妙的现象, ...

  10. iOS 修改label中文字的行间距

    UILabel *label = [[UILabel alloc] init]; label.font = [UIFont systemFontOfSize:]; label.textColor = ...