`
rensanning
  • 浏览: 3509845 次
  • 性别: Icon_minigender_1
  • 来自: 大连
博客专栏
Efef1dba-f7dd-3931-8a61-8e1c76c3e39f
使用Titanium Mo...
浏览量:37407
Bbab2146-6e1d-3c50-acd6-c8bae29e307d
Cordova 3.x入门...
浏览量:603972
C08766e7-8a33-3f9b-9155-654af05c3484
常用Java开源Libra...
浏览量:677512
77063fb3-0ee7-3bfa-9c72-2a0234ebf83e
搭建 CentOS 6 服...
浏览量:86989
E40e5e76-1f3b-398e-b6a6-dc9cfbb38156
Spring Boot 入...
浏览量:399568
Abe39461-b089-344f-99fa-cdfbddea0e18
基于Spring Secu...
浏览量:68983
66a41a70-fdf0-3dc9-aa31-19b7e8b24672
MQTT入门
浏览量:90294
社区版块
存档分类
最新评论

使用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
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics