javascript原生移动云编程11 - 如何调用手机图库中图片

用javascript在码实云平台上，可以在云里编写原生的移动应用。移动应用经常需要调用手机里图库的图片（或视频），并且把图片上传到云存储里。由于码实平台提供了全面的云服务，多媒体的上传下载就变得非常容易。这个应用实例延续了另一个使用手机相机拍照的教程。因此建议你先熟悉下相机拍照那个教程的代码。

本实例的图片列表页面和相机拍照的那个页面代码几乎完全一样，不同之处是代码的开始部分有一段显示图片加载进程的提示。你如果有较多的图片附件，加载时间比较长，这样的提示信息对用户比较友好。里一个不同之处是图片附件的展示代码，我们有意提供了另一种用Ti imageView的实现，告诉大家如果想深度定制这部分应该如何做。其中用到了Mash5.Tenant.File.download从云里下载图片文件，然后显示到一个imageView里去。

var attachment = feed.bo.Fields[1].Value;if (attachment) {var maxHeight = dipToPx(240);var imageView = Ti.UI.createImageView({width : Ti.UI.FILL,height : maxHeight,bottom: '20dip'});view.add(imageView);var iWidth = attachment.thumbnailWidth;var iHeight = attachment.thumbnailHeight;if (iWidth && iHeight) {var imageRatio = iWidth / iHeight;var viewRatio = Ti.Platform.displayCaps.platformWidth / maxHeight;if (imageRatio < viewRatio) {iWidth = maxHeight * iWidth / iHeight;iHeight = maxHeight;} else {iHeight = Ti.Platform.displayCaps.platformWidth * iHeight / iWidth;iWidth = Ti.Platform.displayCaps.platformWidth;}imageView.width = iWidth;imageView.height = iHeight;Mash5.Tenant.File.download({context : this.getContext(),fileInfo : attachment}, function (r) {if (r.success && r.file && r.file.read) {var blob = r.file.read();if (blob) {var realWidth = dipToPx(blob.width);var realHeight = dipToPx(blob.height);if (realWidth < iWidth || realHeight < iHeight) {imageView.width = realWidth;imageView.height = realHeight;}imageView.image = r.file;}}});}} else {textView.bottom = '20dip';}

页面2的完整代码请到web工具的开源部分查看，这个页面也是和云数据操作的那个教程雷同。其中引入了相机上传照片的操作，分别定义在如下的两个函数里。Mash5.Tenant.File.uploadFromCamera提供了调用相机拍照并且上传照片的完整功能。而在createParameters里面，我们使用的码实平台SDK提供的Mash5.UI.createProgressDialog来显示标配的照片上传进度条。

startCamera: function(attachView) {        var parameters = this.createParameters(attachView);        Mash5.Tenant.File.uploadFromCamera({            context: this.getContext(),            onprogresschanged: parameters.onprogresschanged,            setCancelListener: parameters.setCancelListener        }, parameters.onload);    },createParameters: function(attachView) {        var progressDialog = Mash5.UI.createProgressDialog();        progressDialog.setProgress(0, '正在上传...');        return {            onprogresschanged: function(progress) {                progressDialog.show();                progressDialog.setProgress(progress, '正在上传...');            }.bind(this),            setCancelListener: function(listener) {                progressDialog.setCancelListener(listener);            },            onload: function(r) {                progressDialog.hide();                setTimeout(function() {                    progressDialog.hide();                }, 600);                if (r.success) {                    var attachment = r.fileInfo;                    if (attachView && attachment) {attachView.clear();attachView.addAttachment(attachment);}                } else {                    alert(r.message);                }            }.bind(this)        };    },

另一个页面是从手机图库挑选图片并上传到码实云平台里。页面的代码和手机拍照的教程几乎完全相同，所不同的是本实例调用了码实平台SDK Mash5.Tenant.File.uploadFromGallery访问手机图库并且上传图片。