微信小程序开发实战(24):选择图像
wx:chooseImage方法用于从相册选择若干图像文件(1到n),或从相机拍摄图像,并返回被选中图像的临时路径,以便以后处理。
wx:chooseImage方法有一个Object类型的参数,该参数值的属性用于指定与图像相关的各种信息,下面是这些属性的描述。
- count:Number类型,可选属性,表示最多可以选择的图片张数,默认是9。
- sizeType:StringArray类型,可选属性,表示图像尺寸类型,可设置的值是original和compressed。前者表示原图,后者表示压缩图。默认二者都有,也就是允许用户选择是打开原图还是压缩图
- sourceType:StringArray类型,可选属性,表示图像来源,可设置的值是album和camera,前者表示从相册选图,后者表示用相机拍摄,默认二者都有,也就是允许用户选择图像来源
- success:Function类型,必须属性,成功则返回图片的本地文件路径列表 tempFilePaths
- fail:Function类型,可选属性,接口调用失败的回调函数
- complete:Function类型,可选属性,接口调用结束的回调函数(调用成功、失败都会执行)
下面的例子给出了一个简单的演示,该程序通过点击按钮,执行wx:chooseImage方法来选取图像,然后,将选取的图像显示在<image>组件中。
index.wxml
<view style="margin:20px">
<button bindtap="onClick">选择图像</button>
<image src="{{imageSrc}}" mode="aspectFit" style="margin-top:10px;width: 300px; height: 300px; background-color: #eeeeee;" />
</view>
index.js
var app = getApp()
Page({
data: {
imageSrc: '' // 该变量与<image>组件绑定
},
//选择图像
onClick: function () {
var that = this;
wx.chooseImage({
count: 1, // 最多只允许选择一个图像
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: function (res) {
that.setData(
{
imageSrc: res.tempFilePaths[0] // 显示选中的第一个图像
}
)
// 输出返回的路径个数
console.log(res.tempFilePaths.length)
}
})
}
})
由于小程序模拟器和真机的差异,在模拟器和真机上测试wx:chooseImage方法的效果是不一样的。例如,在模拟器上,不管sourceType属性的值是什么,都只会显示一个图像选择对话框,允许从本地选取一个或若干图像文件。而在真机上进行测试,根据sourceType属性值的不同,会允许用户有不同的选择。
我们现在模拟器上测试,点击“选择图像”按钮,会弹出一个如图1所示的图像选择对话框(这是Mac OS X的对话框,Windows风格对话框请在Windows下测试)。不管count属性的值是多少,该对话框都允许同时选择多个图像文件。不过,wx:chooseImage方法会根据count属性的值,选择前count个图像文件。例如,count属性值为1,不管选择了多少图像文件,wx:chooseImage方法都只会选取第一个图像文件,其他的图像文件被忽略。
本例中,sourceType属性的值为['album', 'camera'],也就是允许用户决定从相册选择图像,还是从相机拍摄图像。不过小程序模拟器目前不支持相机,所以在模拟器中只会显示图像选择对话框。不过在真机上就不一样了。在iPhone上测试,在屏幕的下方会出现如图2的图像源选择菜单。
在Android手机上测试,会看到如图3所示的图像源选择窗口,第一项是“拍摄照片”,其他的是相册中的图像。
如果sizeType属性的值是['original', 'compressed'],在从相册中选择图像后,点击屏幕下方的“预览”,会允许用户选择是否从原图打开。iPhone的效果如图4所示,Android的效果如图4所示。
如果不选择原图,系统会对原图进行压缩(图像尺寸缩小处理),以减少对资源的消耗。当sizeType属性的值是['original']或['compressed']时,在“预览”窗口就不会出现“原图”的选项,直接采用压缩或原图的方式处理图像文件。
选择图像后,会在<image>组件中显示已经选择的图像,效果如图6所示。
- Nginx+uWSGI部署Django网站的详细步骤,脱坑必备,值得收藏!
- 友元类
- 大数据最佳实践 | HBase客户端
- 模板类的友元
- Qt学习笔记 TableWidget使用说明和增删改操作的实现
- 计算机程序的思维逻辑 (9) - 强大的循环
- Qt学习笔记 QMessageBox
- Java finally return知识小菜
- Qt 学习笔记 TreeWidget 增删改
- 计算机程序的思维逻辑 (9) - 条件执行的本质
- Awesome!细数10个隐藏在Python中的彩蛋
- Qt学习笔记 ListWidget的增删改
- Qt学习笔记 信号和槽
- 在Qt Creator 和在 vs2012 里添加信号和槽
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- weblogic Schema validation schemaValidationEnabled=false 启动报错解决
- redis 反序列化deserialize异常问题解决
- redis 入门(二)——maven4.0 + Jedis2.9.0 + redis3.2.6 实战
- spring boot 启动报错Log4j2 could not find a logging implementation 解决
- spring boot 启动 NoClassDefFoundError: org/springframework/core/ErrorCoded 报错
- java.lang.NoSuchMethodError: org.springframework.core.ResolvableType.forInstance 错误解决
- spring boot启动 no method 'getPersistenceUtil'报错解决
- spring redis java.lang.IllegalStateException: Cannot load configuration class: redis.RedisTemplet报错
- Elasticsearch: Index template
- 基于rest风格对Neo4j进行调用访问之———httpClient
- spring boot + mybatis 访问 neo4j
- window下通过ELK框架进行大型日志线下的可视化分析
- 一句话解释ThreadLocal类
- ElasticsSearch 之 倒排索引
- tomcat返回cookie有双引号问题