微信小程序开发实战(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方法都只会选取第一个图像文件,其他的图像文件被忽略。
图1 图像选择对话框
本例中,sourceType属性的值为['album', 'camera'],也就是允许用户决定从相册选择图像,还是从相机拍摄图像。不过小程序模拟器目前不支持相机,所以在模拟器中只会显示图像选择对话框。不过在真机上就不一样了。在iPhone上测试,在屏幕的下方会出现如图2的图像源选择菜单。
图2 iPhone中图像源选择菜单
在Android手机上测试,会看到如图3所示的图像源选择窗口,第一项是“拍摄照片”,其他的是相册中的图像。
图3 Android中的图像源选择窗口
如果sizeType属性的值是['original', 'compressed'],在从相册中选择图像后,点击屏幕下方的“预览”,会允许用户选择是否从原图打开。iPhone的效果如图4所示,Android的效果如图4所示。
图4 iPhone中选择原图的窗口
图5 Android中选择原图的窗口
如果不选择原图,系统会对原图进行压缩(图像尺寸缩小处理),以减少对资源的消耗。当sizeType属性的值是['original']或['compressed']时,在“预览”窗口就不会出现“原图”的选项,直接采用压缩或原图的方式处理图像文件。
选择图像后,会在<image>组件中显示已经选择的图像,效果如图6所示。
图6 在<image>组件中显示图像
微信小程序开发实战(24):选择图像相关推荐
- 视频教程-微信小程序开发实战之番茄时钟开发-微信开发
微信小程序开发实战之番茄时钟开发 4年web前后端开发经验,熟悉PHP,Python后端技术,熟悉基于Lnmp环境的项目开发和部署,擅长Yii,ThinkPHP,CI,Django,Flask等国内外 ...
- 《微信小程序开发实战》课后题
黑马程序员版<微信小程序开发实战> 第一章 填空题 1.微信小程序可以通过________方式打开. 答案:扫描二维码 2.微信开发者工具中的上传是指将代码上传到________. 答案: ...
- 微信小程序python入门教程-2020Python+微信小程序开发实战(视频+课件)
本套课程出自老男孩IT教程的Python+微信小程序开发实战官网售价79元,课程基于微信小程序平台开发的的拍卖系统.课程分为4个章节微信小程序快速入门用微信小程序快速开发认证和发布动态模块,第二章拍卖 ...
- 微信小程序开发实战(9):单行输入和多行输入组件
-----------支持作者请转发本文----------- 1. 单行输入组件(input) input组件用于录入单行文本,尽管input的基本功能是文本录入,但该组件的属性还是比较多的,也比 ...
- JEECG社区微信小程序开发实战-张代浩-专题视频课程
JEECG社区微信小程序开发实战-511人已学习 课程介绍 微信小程序开发培训,包含环境搭建.实例讲解.对接支付功能等课题. 课程收益 微信小程序开发培训,包含环境搭建.实例讲 ...
- 微信小程序开发实战课程之油耗计算器-耿广龙-专题视频课程
微信小程序开发实战课程之油耗计算器-3406人已学习 课程介绍 微信小程序开发实战课程之油耗计算器,通过练习开发工具类的油耗计算器小程序,可以帮助大家了解微信小程序的API,相关组件的 ...
- 王者级微信小程序开发实战教学 从零到高手搭建微信小程序框架开发教程
王者级微信小程序开发实战教学 从零到高手搭建微信小程序框架开发教程 小程序进阶 王者级微信小程序开发实战教学课程,讲师手把手对同学们进行微信小程序开发的进阶实战,从零开始搭建,从本地到云端开始系统化的 ...
- 微信小程序开发实战指南
微信小程序是一种快速开发并在微信平台上发布的应用程序.它可以在微信内部直接运行,无需安装,具有开发周期短.便于传播.用户量大等优点.本文将从入门到精通的角度,介绍微信小程序的开发流程.技术架构和实战经 ...
- 微信小程序|开发实战篇之二
开发实战篇之二 前言 1.零碎知识点和优化点 1.1 ES6模板字符串 1.2 ES6扩展运算符 1.3 独立更新like组件状态 1.4 自定义组件支持hidden 2.音乐music组件开发 2. ...
- 微信小程序|开发实战篇之一
开发实战篇之一 前言 1.通用方法的封装 2.数据获取方法的封装 2.1 抽离classic.js中的request()方法 2.2 组件数据传递 3.movie组件的创建 3.1 组件代码开发 3. ...
最新文章
- JavaScriptjQuery.事件流
- PHP 的面向方面编程
- 怎么会这样?delete [] 了,还能用!!!
- 用户行为分析笔记(二):系统的整体架构
- 今天,GitHub 挂了!
- mysql中mapping标签的作用_3种高效的Tags标签系统数据库设计方案分享
- 游戏鼠标的dpi测试软件,有什么软件可以测试鼠标的dpi或着说cpi – 手机爱问
- java 开源 邮件系统_Java架构师方案—简单的邮件系统(附完整项目代码)
- VC++编程实现镜像劫持
- 点到线段的距离 计算几何
- 诚之和:年轻人的尽头,是回老家买房吗?
- 架构必看:12306抢票亿级流量架构演进(图解+秒懂+史上最全)
- ibm jazz_Jazz源代码管理管理指南
- matlab如何画极零图,用MATLAB画零极点图.ppt
- 计算机图像处理2000字论文,图像处理计算机技术论文
- 1、唯交易的市场不会偏差,2、期权对冲股票市值张数和权利金计算
- Mac环境下安装MongoDB数据库
- 函数极限的概念及性质
- No appenders could be found for logger
- 主板噪音测试软件,E1通过刷主板BIOS方法,给风扇降低噪音