Sencha Touch 抓图问题

Question

我正在尝试在使用 Sencha Touch 2.3.1 和 Cordova 3.4.1-0.1.0 的应用程序中捕获图片。 阅读文档 (http://docs.sencha.com/touch/2.3.1/#!/api/Ext.device.Camera-method-capture) 看起来非常容易和简单，但我的体验非常奇怪。

首先我创建一个 Sencha Touch 应用并在其中初始化 Cordova

sencha app generate MyApp ./MyApp
cd ./MyApp
sencha cordova init

此时，当我尝试构建时，它可以在真实设备、android 模拟器甚至浏览器上正常工作。 然后，我更改了 Main.js 以添加捕获功能。

Ext.define('CameraTest.view.Main', {
    extend: 'Ext.tab.Panel',
    xtype: 'main',
    requires: [
        'Ext.TitleBar',
        'Ext.device.*'
    ],
    config: {
        tabBarPosition: 'bottom',

        items: [
            {
                title: 'Welcome',
                iconCls: 'home',

                styleHtmlContent: true,
                scrollable: true,

                items: {
                    docked: 'top',
                    xtype: 'titlebar',
                    title: 'Welcome to Sencha Touch 2'
                },

                html: [
                    "You've just generated a new Sencha Touch 2 project. What you're looking at right now is the ",
                    "contents of <a target='_blank' href=\"app/view/Main.js\">app/view/Main.js</a> - edit that file ",
                    "and refresh to change what's rendered here."
                ].join("")
            },
            {
                title: 'Camera',
                iconCls: 'action',
                layout: {
                            type:"vbox",
                            pack:"center",
                            align:"center"
                        },
                items: [
                    {
                        docked: 'top',
                        xtype: 'titlebar',
                        title: 'CameraTest'
                    },
                    {
                        xtype: 'panel',
                        html: '<img style="height: 200px; width: 200px;" src="http://placehold.it/200x200" />'
                    },
                    {
                        xtype: "button",
                        text: "Photo",
                        handler: function() {
                            function success(image_uri) {
                                var img = Ext.ComponentQuery.query("image")[0];
                                img.setSrc(image_uri);
                            }

                            function fail(message) {
                                Ext.Msg.alert("Failed: " + message);
                            }

                            Ext.device.Camera.capture({
                                    sucess: success, 
                                    failure: fail, 
                                    quality: 50,
                                    destination: 'data',
                                    source: 'camera'
                              });
                        }
                    }
                ]
            }
        ]
    }
});

完成，应用停止加载。它卡在 appLoadingIndicator 中并且没有到达选项卡面板组件。

但是，如果我在浏览器中打开它，它就可以正常工作。 我什至不知道如何调试这个。

This is the screen that the app gets stuck

Answer 1

看来您可能混淆了某些参数。

捕获（选项、范围、目的地、编码、宽度、高度）

options = 一个对象，在您的情况下将具有 {success:, failure:, quality:, source}, ... 并且，destination：不是选项对象的一部分，而是它自己的参数（范围、编码、宽度和高度）

Answer 2

我刚刚解决了！ 阅读这些 Cordova 文档：http://cordova.apache.org/docs/en/3.0.0/guide_cli_index.md.html 我发现在使用 API =P 之前我需要安装插件。

这样做解决了一切：

cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-camera.git