wx:chooseImage 方法用于從相冊(cè)選擇若干圖像文件（ 1 到 n ），或從相機(jī)拍攝圖像，并返回被選中圖像的臨時(shí)路徑，以便以后處理。

wx:chooseImage 方法有一個(gè) Object 類型的參數(shù)，該參數(shù)值的屬性用于指定與圖像相關(guān)的各種信息，下面是這些屬性的描述。

• count ： Number 類型，可選屬性，表示最多可以選擇的圖片張數(shù)，默認(rèn)是 9 。

• sizeType ： StringArray 類型，可選屬性，表示圖像尺寸類型，可設(shè)置的值是 original 和 compressed 。前者表示原圖，后者表示壓縮圖。默認(rèn)二者都有，也就是允許用戶選擇是打開(kāi)原圖還是壓縮圖

• sourceType ： StringArray 類型，可選屬性，表示圖像來(lái)源，可設(shè)置的值是 album 和 camera ，前者表示從相冊(cè)選圖，后者表示用相機(jī)拍攝，默認(rèn)二者都有，也就是允許用戶選擇圖像來(lái)源

• success ： Function 類型，必須屬性，成功則返回圖片的本地文件路徑列表 tempFilePaths

• fail ： Function 類型 ，可選屬性，接口調(diào)用失敗的回調(diào)函數(shù)

• complete ： Function 類型，可選屬性， 接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會(huì)執(zhí)行）

下面的例子給出了一個(gè)簡(jiǎn)單的演示，該程序通過(guò)點(diǎn)擊按鈕，執(zhí)行 wx:chooseImage 方法來(lái)選取圖像，然后，將選取的圖像顯示在 <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, // 最多只允許選擇一個(gè)圖像
      sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: function (res) {


        that.setData(
          {
imageSrc: res.tempFilePaths[0]    //  顯示選中的第一個(gè)圖像
          }
        )
//  輸出返回的路徑個(gè)數(shù)
console.log(res.tempFilePaths.length)
      }
    })
  }
})

由于小程序模擬器和真機(jī)的差異，在模擬器和真機(jī)上測(cè)試 wx:chooseImage 方法的效果是不一樣的。例如，在模擬器上，不管 sourceType 屬性的值是什么，都只會(huì)顯示一個(gè)圖像選擇對(duì)話框，允許從本地選取一個(gè)或若干圖像文件。而在真機(jī)上進(jìn)行測(cè)試，根據(jù) sourceType 屬性值的不同，會(huì)允許用戶有不同的選擇。

我們現(xiàn)在模擬器上測(cè)試，點(diǎn)擊“選擇圖像”按鈕，會(huì)彈出一個(gè)如圖 1 所示的圖像選擇對(duì)話框（這是 Mac OS X 的對(duì)話框， Windows 風(fēng)格對(duì)話框請(qǐng)?jiān)?/span> Windows 下測(cè)試）。不管 count 屬性的值是多少，該對(duì)話框都允許同時(shí)選擇多個(gè)圖像文件。不過(guò)， wx:chooseImage 方法會(huì)根據(jù) count 屬性的值，選擇前 count 個(gè)圖像文件。例如， count 屬性值為 1 ，不管選擇了多少圖像文件， wx:chooseImage 方法都只會(huì)選取第一個(gè)圖像文件，其他的圖像文件被忽略。

圖1  圖像選擇對(duì)話框

本例中， sourceType 屬性的值為 ['album', 'camera'] ，也就是允許用戶決定從相冊(cè)選擇圖像，還是從相機(jī)拍攝圖像。不過(guò)小程序模擬器目前不支持相機(jī)，所以在模擬器中只會(huì)顯示圖像選擇對(duì)話框。不過(guò)在真機(jī)上就不一樣了。在 iPhone 上測(cè)試，在屏幕的下方會(huì)出現(xiàn)如圖 2 的圖像源選擇菜單。

圖2  iPhone中圖像源選擇菜單

在 Android 手機(jī)上測(cè)試，會(huì)看到如圖 3 所示的圖像源選擇窗口，第一項(xiàng)是“拍攝照片”，其他的是相冊(cè)中的圖像。

圖3  Android中的圖像源選擇窗口

如果 sizeType 屬性的值是 ['original', 'compressed'] ，在從相冊(cè)中選擇圖像后，點(diǎn)擊屏幕下方的“預(yù)覽”，會(huì)允許用戶選擇是否從原圖打開(kāi)。 iPhone 的效果如圖 4 所示， Android 的效果如圖 4 所示。

圖4  iPhone中選擇原圖的窗口

圖5  Android中選擇原圖的窗口

如果不選擇原圖，系統(tǒng)會(huì)對(duì)原圖進(jìn)行壓縮（圖像尺寸縮小處理），以減少對(duì)資源的消耗。當(dāng) sizeType 屬性的值是 ['original'] 或 ['compressed'] 時(shí)，在“預(yù)覽”窗口就不會(huì)出現(xiàn)“原圖”的選項(xiàng)，直接采用壓縮或原圖的方式處理圖像文件。

選擇圖像后，會(huì)在 <image> 組件中顯示已經(jīng)選擇的圖像，效果如圖 6 所示。

圖6  在<image>組件中顯示圖像