api.getPicture

獲取本地圖片放置到伺服器上或者在app中預覽是app的基本功能，今天使用了APICloud框架的api.getPicture這個api獲取到的本地圖片預覽在app中，就像上傳qq頭像一樣，其實就是這個需求，獲取本地照片（拍攝照片）設定為頭像，先預覽一下。

這個api的文件寫的很清楚，每個引數的功能，可是其中還是有點坑的

api.getPicture({
    sourceType: 'library',
    encodingType: 'jpg',
    mediaValue: 'pic',
    destinationType: 'base64'
 
,
    quality: 50,
    targetWidth: 100,
    targetHeight: 100
}, function(ret, err) {
    if (ret) {
        $api.attr($api.dom('img'),'src', ret.base64Data)
    } else {
        alert(JSON.stringify(err));
    }
});

這個是沒有坑的程式碼

 api.getPicture({
    sourceType: 'library',
    encodingType: 'jpg',
    mediaValue: 'pic'
 
,
    destinationType: 'base64',
    quality: 50,
    targetWidth: 750,
    targetHeight: 750
}, function(ret, err) {
    if (ret) {
        $api.attr($api.dom('img'),'src', ret.base64Data)
    } else {
        alert(JSON.stringify(err));
    }
});

對比以上兩段程式碼，第一段是官方文件給的，一開始我直接拷貝過來使用的時候，拿到圖片後顯示在頁面中就會非常模糊，就像下面這樣，這個問題糾結了好久，又回頭仔細看了一遍文件才發現targetWidth: 750,
targetHeight: 750

型別：數字

預設值：原圖寬度

描述：（可選項）壓縮後的圖片寬度，圖片會按比例適配此寬度

- targetHeight：

型別：數字

預設值：原圖高度

描述：（可選項）壓縮後的圖片高度，圖片會按比例適配此高度

如果targetWidth和targetHeight設定過小的時候（比如官方的100），圖片就會照成失真，就是上面的顯示結果，所以這兩個屬性設定不要太小,同時把quality（1-100）圖片質量設定的低一點,只是預覽效果,設定好這三個屬性後就可以正常的預覽圖片了。

由於後臺還沒有寫好,所以今天就暫時先不寫上傳圖片了