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

53 阅读 0 评论 35 点赞

我是靠谱客的博主忧心心情，最近开发中收集的这篇文章主要介绍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访问手机图库并且上传图片。