PhoneGap的3(阿帕奇科尔多瓦)误差Getp​​icture中(不能读取属性'PictureSourceType“和DATA_URL [英] Phonegap 3 (apache cordova) error with getpicture (Cannot read property 'PictureSourceType' and DATA_URL

查看:170
本文介绍了PhoneGap的3(阿帕奇科尔多瓦)误差Getp​​icture中(不能读取属性'PictureSourceType“和DATA_URL的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我在开发与Apache 3.3.0科尔多瓦的Web应用程序的新手。
需要几天的时间来启动相机和使用插件文件传输,但总是给我同样的错误。

如果我用我的应用程序与PhoneGap的2.9一切完美,

STEPS我也跟着用3.3.0科尔多瓦创建我的项目

我使用的命令行来创建一个Hello应用程序安装必要的插件,如相机或文件传输。

我添加了权限清单我的插件在config.xml中。

这不能成为问题。将大大AP preciate帮助。
我与Eclipse的工作,并在Android 4.4.2开发。

的index.html

 <!DOCTYPE HTML>
< HTML和GT;
  < HEAD>
    <标题>捕获照片< /标题>    <脚本类型=文/ JavaScript的字符集=utf-8SRC =cordova.js>< / SCRIPT>
    <脚本类型=文/ JavaScript的字符集=utf-8SRC =JS / index.js>< / SCRIPT>
    <脚本类型=文/ JavaScript的字符集=utf-8>    VAR pictureSource; //图片来源
    VAR destinationType; //设置返回值的格式    //等待设备API库加载
    //
    document.addEventListener(deviceready,onDeviceReady,FALSE);    //设备API可用
    //
    功能onDeviceReady(){
        pictureSource = navigator.camera.PictureSourceType;
        destinationType = navigator.camera.DestinationType;
    }    //如果照片是成功检索调用
    //
    功能onPhotoDataSuccess(为imageData){
      //取消注释查看的base64恩codeD图像数据
      //执行console.log(为imageData);      //获取图像句柄
      //
      变种smallImage =的document.getElementById('smallImage');      //取消隐藏图像元素
      //
      smallImage.style.display =块;      //显示所拍摄的照片
      //内联CSS规则是用来调整图像大小
      //
      smallImage.src =数据:图像/ JPEG; BASE64,+为imageData;
    }    //如果照片是成功检索调用
    //
    功能onPhotoURISuccess(imageURI){
      //取消注释查看图像文件URI
      //执行console.log(imageURI);      //获取图像句柄
      //
      变种largeImage =的document.getElementById('largeImage');      //取消隐藏图像元素
      //
      largeImage.style.display =块;      //显示所拍摄的照片
      //内联CSS规则是用来调整图像大小
      //
      largeImage.src = imageURI;
    }    //一个按钮将调用这个函数
    //
    功能capturePhoto(){
      //将图片使用设备的摄像头和图像检索为base64-CN codeD字符串
      navigator.camera.getPicture(onPhotoDataSuccess,onFail,{质量:50,
        destinationType:destinationType.DATA_URL});
    }    //一个按钮将调用这个函数
    //
    功能capturePhotoEdit(){
      //将图片使用设备的摄像头,让编辑和图像检索为base64-CN codeD字符串
      navigator.camera.getPicture(onPhotoDataSuccess,onFail,{质量:20,allowEdit:真实,
        destinationType:destinationType.DATA_URL});
    }    //一个按钮将调用这个函数
    //
    功能getPhoto(源){
      //从指定源中检索图像文件位置
      navigator.camera.getPicture(onPhotoURISuccess,onFail,{质量:50,
        destinationType:destinationType.FILE_URI,
        sourceType的:源});
    }    //调用如果有什么不好的事情发生。
    //
    功能onFail(消息){
      警报('因为失败:'+消息);
    }    < / SCRIPT>
  < /头>
  <身体GT;
    <按钮的onclick =capturePhoto();>捕获照片< /按钮> < BR>
    <按钮的onclick =capturePhotoEdit();>捕获编辑照片及LT; /按钮> < BR>
    <按钮的onclick =getPhoto(pictureSource.PHOTOLIBRARY);肽从图片库< /按钮>< BR>
    <按钮的onclick =getPhoto(pictureSource.SAVEDPHOTOALBUM);>从相册和LT; /按钮>< BR>
    < IMG风格=显示:无;宽度:60像素,高度:60像素; ID =smallImageSRC =/>
    < IMG风格=显示:无; ID =largeImageSRC =/>
  < /身体GT;
< / HTML>

清单

 < XML版本='1.0'编码='UTF-8'&GT?;
<表明机器人:hardwareAccelerated =真正的安卓版code =1机器人:=的versionName0.0.1机器人:windowSoftInputMode =adjustPan包=输入com.example.hello的xmlns:机器人= http://schemas.android.com/apk/res/android\">
    <支持屏安卓anyDensity =真正的机器人:largeScreens =真正的机器人:normalScreens =真正的机器人:调整大小=真正的机器人:smallScreens =真正的机器人:xlargeScreens =真/>
    <使用许可权的android:NAME =android.permission.INTERNET对/>
    <应用机器人:可调试=真正的机器人:hardwareAccelerated =真正的机器人:图标=@绘制/图标机器人:标签=@字符串/ APP_NAME>
        <活动机器人:configChanges =方向| keyboardHidden |键盘|屏幕尺寸|区域机器人:标签=@字符串/ APP_NAME机器人:名字=helloclimbing安卓主题=@安卓风格/ Theme.Black.NoTitleBar >
            &所述;意图滤光器>
                <作用机器人:名字=android.intent.action.MAIN/>
                <类机器人:名字=android.intent.category.LAUNCHER/>
            &所述; /意图滤光器>
        < /活性GT;
    < /用途>
    <采用-SDK安卓的minSdkVersion =10机器人:targetSdkVersion =19/>
    <使用许可权的android:NAME =android.permission.ACCESS_NETWORK_STATE/>
    <使用许可权的android:NAME =android.permission.WRITE_EXTERNAL_STORAG​​E/>
    <使用许可权的android:NAME =android.permission.RECORD_AUDIO/>
    <使用许可权的android:NAME =android.permission.RECORD_VIDEO/>
        <使用许可权的android:NAME =android.permission.CAMERA/>
    <使用特征的android:NAME =android.hardware.camera/>
    <使用特征的android:NAME =android.hardware.camera.autofocus/>
< /清单>

的Config.xml

 < XML版本='1.0'编码='UTF-8'&GT?;
<控件ID =输入com.example.hello版本=0.0.1的xmlns =htt​​p://www.w3.org/ns/widgets的xmlns:CDV =htt​​p://cordova.apache.org /ns/1.0\">
    <名称>你好科尔多瓦< /名称>
    < preference NAME =日志级别值=DEBUG/>
    <功能名称=应用程序>
        < PARAM NAME =Android的包值=org.apache.cordova.App/>
    < /功能>
    <名称>&helloclimbing LT; /名称>
    <描述>
        样本的Apache科尔多瓦应用程序响应deviceready事件。
    < /描述>
    <作者的电子邮件=dev@cordova.apache.org的href =htt​​p://cordova.io>
        Apache的科尔多瓦队
    < /笔者>
    <内容SRC =的index.html/>
    <获得原产=*/>
    <功能名称=设备>
        < PARAM NAME =Android的包值=org.apache.cordova.device.Device/>
    < /功能>
    <功能名称=NetworkStatus>
        < PARAM NAME =Android的包值=org.apache.cordova.networkinformation.NetworkManager/>
    < /功能>
    <功能名称=相机>
        < PARAM NAME =Android的包值=org.apache.cordova.camera.CameraLauncher/>
    < /功能>
    <功能名称=文件>
        < PARAM NAME =Android的包值=org.apache.cordova.file.FileUtils/>
    < /功能>
    <功能名称=捕获>
        < PARAM NAME =Android的包值=org.apache.cordova.mediacapture.Capture/>
    < /功能>
    <功能名称=文件传输>
        < PARAM NAME =Android的包值=org.apache.cordova.filetransfer.FileTransfer/>
    < /功能>
    <功能名称=InAppBrowser>
        < PARAM NAME =Android的包值=org.apache.cordova.inappbrowser.InAppBrowser/>
    < /功能>
    <功能名称=htt​​p://api.phonegap.com/1.0/device/>
<功能名称=htt​​p://api.phonegap.com/1.0/camera/>
<功能名称=htt​​p://api.phonegap.com/1.0/file/>
<功能名称=htt​​p://api.phonegap.com/1.0/media/>
<功能名称=htt​​p://api.phonegap.com/1.0/network/>
< /部件>


解决方案

您不必手动编辑AndroidManifest.xml中或config.xml中安装一个插件。
见我的答案在 http://stackoverflow.com/a/20813323/529323

我试过你的code和获取图片功能的作品。只需安装插件以恰当的方式。

I'm newbie in developing web applications with apache 3.3.0 cordova. take days trying to start the camera and use the plugin filetransfer but always gives me the same error.

if I use my application with phonegap 2.9 everything works perfectly,

STEPS I followed to create my project with 3.3.0 cordova

I used command line to create a Hello app installing the necessary plugins such as the camera or filetransfer.

I added permissions in the manifest i plugins in config.xml.

This can not be the problem. Would greatly appreciate help. I'm working with Eclipse and developing on Android 4.4.2.

Index.html

    <!DOCTYPE html>
<html>
  <head>
    <title>Capture Photo</title>

    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/index.js"></script>
    <script type="text/javascript" charset="utf-8">

    var pictureSource;   // picture source
    var destinationType; // sets the format of returned value

    // Wait for device API libraries to load
    //
    document.addEventListener("deviceready",onDeviceReady,false);

    // device APIs are available
    //
    function onDeviceReady() {
        pictureSource=navigator.camera.PictureSourceType;
        destinationType=navigator.camera.DestinationType;
    }

    // Called when a photo is successfully retrieved
    //
    function onPhotoDataSuccess(imageData) {
      // Uncomment to view the base64-encoded image data
      // console.log(imageData);

      // Get image handle
      //
      var smallImage = document.getElementById('smallImage');

      // Unhide image elements
      //
      smallImage.style.display = 'block';

      // Show the captured photo
      // The inline CSS rules are used to resize the image
      //
      smallImage.src = "data:image/jpeg;base64," + imageData;
    }

    // Called when a photo is successfully retrieved
    //
    function onPhotoURISuccess(imageURI) {
      // Uncomment to view the image file URI
      // console.log(imageURI);

      // Get image handle
      //
      var largeImage = document.getElementById('largeImage');

      // Unhide image elements
      //
      largeImage.style.display = 'block';

      // Show the captured photo
      // The inline CSS rules are used to resize the image
      //
      largeImage.src = imageURI;
    }

    // A button will call this function
    //
    function capturePhoto() {
      // Take picture using device camera and retrieve image as base64-encoded string
      navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,
        destinationType: destinationType.DATA_URL });
    }

    // A button will call this function
    //
    function capturePhotoEdit() {
      // Take picture using device camera, allow edit, and retrieve image as base64-encoded string
      navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true,
        destinationType: destinationType.DATA_URL });
    }

    // A button will call this function
    //
    function getPhoto(source) {
      // Retrieve image file location from specified source
      navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,
        destinationType: destinationType.FILE_URI,
        sourceType: source });
    }

    // Called if something bad happens.
    //
    function onFail(message) {
      alert('Failed because: ' + message);
    }

    </script>
  </head>
  <body>
    <button onclick="capturePhoto();">Capture Photo</button> <br>
    <button onclick="capturePhotoEdit();">Capture Editable Photo</button> <br>
    <button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">From Photo Library</button><br>
    <button onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">From Photo Album</button><br>
    <img style="display:none;width:60px;height:60px;" id="smallImage" src="" />
    <img style="display:none;" id="largeImage" src="" />
  </body>
</html>

Manifest

    <?xml version='1.0' encoding='utf-8'?>
<manifest android:hardwareAccelerated="true" android:versionCode="1" android:versionName="0.0.1" android:windowSoftInputMode="adjustPan" package="com.example.hello" xmlns:android="http://schemas.android.com/apk/res/android">
    <supports-screens android:anyDensity="true" android:largeScreens="true" android:normalScreens="true" android:resizeable="true" android:smallScreens="true" android:xlargeScreens="true" />
    <uses-permission android:name="android.permission.INTERNET" />
    <application android:debuggable="true" android:hardwareAccelerated="true" android:icon="@drawable/icon" android:label="@string/app_name">
        <activity android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale" android:label="@string/app_name" android:name="helloclimbing" android:theme="@android:style/Theme.Black.NoTitleBar">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
    <uses-sdk android:minSdkVersion="10" android:targetSdkVersion="19" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.RECORD_AUDIO" />
    <uses-permission android:name="android.permission.RECORD_VIDEO" />
        <uses-permission android:name="android.permission.CAMERA" />
    <uses-feature android:name="android.hardware.camera" />
    <uses-feature android:name="android.hardware.camera.autofocus" />
</manifest>

Config.xml

    <?xml version='1.0' encoding='utf-8'?>
<widget id="com.example.hello" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>Hello Cordova</name>
    <preference name="loglevel" value="DEBUG" />
    <feature name="App">
        <param name="android-package" value="org.apache.cordova.App" />
    </feature>
    <name>helloclimbing</name>
    <description>
        A sample Apache Cordova application that responds to the deviceready event.
    </description>
    <author email="dev@cordova.apache.org" href="http://cordova.io">
        Apache Cordova Team
    </author>
    <content src="index.html" />
    <access origin="*" />
    <feature name="Device">
        <param name="android-package" value="org.apache.cordova.device.Device" />
    </feature>
    <feature name="NetworkStatus">
        <param name="android-package" value="org.apache.cordova.networkinformation.NetworkManager" />
    </feature>
    <feature name="Camera">
        <param name="android-package" value="org.apache.cordova.camera.CameraLauncher" />
    </feature>
    <feature name="File">
        <param name="android-package" value="org.apache.cordova.file.FileUtils" />
    </feature>
    <feature name="Capture">
        <param name="android-package" value="org.apache.cordova.mediacapture.Capture" />
    </feature>
    <feature name="FileTransfer">
        <param name="android-package" value="org.apache.cordova.filetransfer.FileTransfer" />
    </feature>
    <feature name="InAppBrowser">
        <param name="android-package" value="org.apache.cordova.inappbrowser.InAppBrowser" />
    </feature>
    <feature name="http://api.phonegap.com/1.0/device" />
<feature name="http://api.phonegap.com/1.0/camera"/>
<feature name="http://api.phonegap.com/1.0/file"/>
<feature name="http://api.phonegap.com/1.0/media"/>
<feature name="http://api.phonegap.com/1.0/network"/>
</widget>

解决方案

You don't have to manually edit AndroidManifest.xml or config.xml to install a plugin. See my answer at http://stackoverflow.com/a/20813323/529323

I've tried your code and the "Get picture" function works. Just install the plugins in the proper way.

这篇关于PhoneGap的3(阿帕奇科尔多瓦)误差Getp​​icture中(不能读取属性'PictureSourceType“和DATA_URL的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆