首页 文章 精选 留言 我的

精选列表

搜索[网站开发],共10000篇文章
优秀的个人博客,低调大师

微信小程序开发实战(25):预览图像

wx.previewImage方法用来预览图像,所谓预览,就是让图像全屏显示。该方法的Object类型参数的属性在事件触发上和wx.chooseImage方法相同,只是wx.previewImage方法需要设置一个urls属性,该属性为StringArray类型,表示用于预览的图像文件路径集合,其实就是上一节代码中res.tempFilePaths属性的值。 本节会改进上一节的程序,让点击<image>组件后,可以预览图像。首先需要为<image>组件设置一个点击事件函数(previewImage),代码如下: <image bindtap="previewImage" src="{{imageSrc}}" mode="aspectFit"style="margin-top:10px;width: 300px; height: 300px; background-color: #eeeeee;" /> 接下来需要在data中定义一个imageList属性,用来保存选中的图像临时路径,在选中图像后(onClick函数),需要设置imageList属性的值。最后需要实现previewImage函数。完整的代码如下: var app = getApp()Page({ data: { imageSrc: '', imageList: [], }, //选择图像 onClick: function () { var that = this; wx.chooseImage({ count: 2, sizeType: [ 'original','compressed'], sourceType: ['album', 'camera'], success: function (res) { that.setData( { imageSrc: res.tempFilePaths[0], imageList:res.tempFilePaths } ) console.log(res.tempFilePaths.length) } }) }, previewImage: function (e) { var current = e.target.dataset.src wx.previewImage({ urls: this.data.imageList }) }}) 在真机上运行小程序后,选中一个或多个图像,然后点击<image>组件,就会进入图像预览窗。 对本文感兴趣,可以加李宁老师微信公众号(unitymarvel): 关注「极客起源」 公众号,获得更多免费技术视频和文章。 本文分享自微信公众号 - 极客起源(geekculture)。如有侵权,请联系 support@oschina.cn 删除。本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

优秀的个人博客,低调大师

微信小程序开发实战(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>组件中显示图像 对本文感兴趣,可以加李宁老师微信公众号(unitymarvel): 关注「极客起源」 公众号,获得更多免费技术视频和文章。 本文分享自微信公众号 - 极客起源(geekculture)。如有侵权,请联系 support@oschina.cn 删除。本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

资源下载

更多资源
优质分享App

优质分享App

近一个月的开发和优化,本站点的第一个app全新上线。该app采用极致压缩,本体才4.36MB。系统里面做了大量数据访问、缓存优化。方便用户在手机上查看文章。后续会推出HarmonyOS的适配版本。

腾讯云软件源

腾讯云软件源

为解决软件依赖安装时官方源访问速度慢的问题,腾讯云为一些软件搭建了缓存服务。您可以通过使用腾讯云软件源站来提升依赖包的安装速度。为了方便用户自由搭建服务架构,目前腾讯云软件源站支持公网访问和内网访问。

Nacos

Nacos

Nacos /nɑ:kəʊs/ 是 Dynamic Naming and Configuration Service 的首字母简称,一个易于构建 AI Agent 应用的动态服务发现、配置管理和AI智能体管理平台。Nacos 致力于帮助您发现、配置和管理微服务及AI智能体应用。Nacos 提供了一组简单易用的特性集,帮助您快速实现动态服务发现、服务配置、服务元数据、流量管理。Nacos 帮助您更敏捷和容易地构建、交付和管理微服务平台。

Rocky Linux

Rocky Linux

Rocky Linux(中文名:洛基)是由Gregory Kurtzer于2020年12月发起的企业级Linux发行版,作为CentOS稳定版停止维护后与RHEL(Red Hat Enterprise Linux)完全兼容的开源替代方案,由社区拥有并管理,支持x86_64、aarch64等架构。其通过重新编译RHEL源代码提供长期稳定性,采用模块化包装和SELinux安全架构,默认包含GNOME桌面环境及XFS文件系统,支持十年生命周期更新。

用户登录
用户注册