使用Titanium Mobile开发iPhone/Android应用（07）- Twitter客户端之照相机

阅读更多

使用照相机

在前一篇我们说了一下iPhone中的几个功能，GPS和地图的表示，这篇我们将说说照相机的使用。能够从已经照好的照片中选择照片，而且选择的方式通过Option Dialog罗列，然后将照片发布到TwitPic。

ImageView的准备

要能够预览选择的照片，我们需要准备表示照片的View。这部分和前一篇中的表示地图部分是一样的。

我们在前一篇中作成的message_window.js中追加一下代码：

var imageView = Titanium.UI.createImageView(
    {
        width: 'auto',
        height: 240,
        top: 220
    }
);
imageView.hide();
win.add(imageView);

和前一篇地图的表示一样，在们有必要显示时候先通过hide方法将其隐藏。而且，注意一下width被设置为'auto'。讲width设置为'auto'，在之后设置照片的数据时候，就能够维持原有图片的比例自动调整大小。

准备OptionDialog

添加图片包含照相和从已有的相册中选择照片。调用OptionDialog只有为用户提供照片添加方式的选择。

var sourceSelect = Titanium.UI.createOptionDialog({
    options:['照相', '从相册选择', '取消'],
    cancel:2,
    title:'添加照片'
});

sourceSelect.addEventListener('click',function(e)
{
    switch( e.index ) {
    case 0:
        startCamera();
        break;
    case 1:
        selectFromPhotoGallery();
        break;
    }
});

var photoButton = Ti.UI.createButton(
    {
        top: 160,
        left: 100,
        width: 80,
        height: 44,
        title: 'photo'
    }
);

photoButton.addEventListener(
    'click',
    function() {
        sourceSelect.show();
    }
);
win.add(photoButton);

在Titanium.UI.createOptionDialog传递的参数options中设置，表示的文字。然后，为做好的optionDialog对象设置click事件的监听。其中从事件对象e的e.index能够取到按下按钮的index。这里我们对「照相」「从相册选择」两个按钮分别调用获取照片的函数。

在后半部分中，作成了一个为了打开Dialog的photoButton按钮。当按下该按钮后，将Dialog显示出来：photoButton.addEventListener中调用sourceSelect.show()

取得照片

上边的代码中调用了两个函数：startCamera，selectFromPhotoGallery。
首先我们编写startCamera方法来启动照相机。

function startCamera() {
    Titanium.Media.showCamera(
        {
            success:function(event) {
                var image = event.media;
                imageView.image = image;
                imageView.show();
                uploadToTwitPic(image);
            },
            //cancel:function(){},
            error:function(error) {
                if (error.code == Titanium.Media.NO_CAMERA)
                {
                    alert('没有找到照相机！');
                }
            },
            saveToPhotoGallery:true,
            allowEditing:true,
            mediaTypes:[Ti.Media.MEDIA_TYPE_PHOTO]
        }
    );
}

其中Titanium.Media.showCamer是启动照相机的方法。参数中是指定照完向后的处理和照相的种类等的设置。

成功照完相后的回调函数指定到success参数中。往该函数传递的event对象的media参数就是我们照好的照片对象。将该照片对象设置到我们刚才做好的imageView当中后讲imageView表示出来。最后通过uploadToTwitPic函数讲该照片发送到TwitPic。至于uploadToTwitPic函数我们最后再说明。

照相的取消，出错处理指定到cancel, error参数中。我们没有取消的具体处理内容，所以这里代码被注释了。出错的处理中，判断了是否是没有照相机引起的错误。

在mediaTypes参数指定了Ti.Media.MEDIA_TYPE_PHOTO后，我们将只能照相不能录像。如果不指定的话。默认是可以录像的。

以下是从相册中获取照片的代码：

function selectFromPhotoGallery() {
    Ti.Media.openPhotoGallery(
        {
            success: function(event) {
                var image = event.media;
                imageView.image = image;
                imageView.show();
                uploadToTwitPic(image);
             },
            // error:  function(error) { },
            // cancel: function() { },
            allowEditing: false,
            mediaTypes:[Ti.Media.MEDIA_TYPE_PHOTO]
        }
    );
}

基本上和启动照相机的代码是一样的。

这样在点下photo按钮后，将表示出来Dialog，选择图片后表示在页面上。


往Twitter发送照片

上边我们已经能够取得照片，下边的事就是想办法把照片发布到Twitter上去。Twitter自身没有专门的发送图片的功能，所以只能利用图片发送服务将图片传到服务器，然后将上传的图片的URL发布到Twitter。

这里说一下刚才的uploadToTwitPic函数。通过TwitPic的OAuth Echo认证方法，利用Twitter的OAuth和TwitPic的APIkey就能够发信息。也就是说不用申请TwitPic的账户，也不用将Twitter的ID和密码登陆到TwitPic.

function uploadToTwitPic(image) {
    var xhr = Ti.Network.createHTTPClient();

    var verifyURL = 'https://api.twitter.com/1/account/verify_credentials.json';
    var params = {
        url:verifyURL,
        method: 'GET'
    };
    var header = twitterApi.oAuthAdapter.createOAuthHeader(params);

    xhr.onload = function(){
        var res = JSON.parse(this.responseText);
        textArea.value = ( textArea.value || '' ) + ' ' + res.url;
    };
    //xhr.onerror = function(){  };

    xhr.open('POST','http://api.twitpic.com/2/upload.json');
    xhr.setRequestHeader('X-Verify-Credentials-Authorization',header);
    xhr.setRequestHeader('X-Auth-Service-Provider',verifyURL);

    xhr.send(
        {
            key: 'YOUR_TWITPIC_API_KEY',
            message: textArea.value,
            media: image
        }
    );
}

twitterApi.oAuthAdapter.createOAuthHeader()方法中，生成OAuth Echo用的HTTP请求的Header。xhr.onload中指定上传完了后讲图像URL显示到文本框的回调函数。xhr.open中指定TwitPic发信用URL。之后通过xhr.setRequestHeader设定OAuth Echo认证的必须HTTPHeader。xhr.setRequestHeader在xhr.open之前调用的话也不会出错误或者警告。但是实际中要注意调用的顺序。

最后在xhr.send中，指定APIkey，media中指定要发送的图片，message中指定说明文字后，TwitPic的页面就能表示出来了。在'YOUR_TWITPIC_API_KEY'指定你自己从http://dev.twitpic.com/apps/new获取的TwitPic的APIkey。

• 
• 大小: 55.3 KB

• 
• 大小: 93.5 KB

• 查看图片附件