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

使用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。

查看更多 下一篇