用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实战教程 查看内容

微信小程序开发实战(24):选择图像

Rolan 2020-8-27 09:58

wx:chooseImage 方法用于从相册选择若干图像文件( 1 到 n ),或从相机拍摄图像,并返回被选中图像的临时路径,以便以后处理。

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>组件中显示图像

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏