APICloud框架——獲取本地圖片信息

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這兩個屬性；官方給的都是100，我就直接拷貝過來的，然后預覽圖就變成下面這個樣子了。

• targetWidth：

  類型：數字

  默認值：原圖寬度

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

• targetHeight：

  類型：數字

  默認值：原圖高度

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

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

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

歡迎大家訪問我的博客www.yuanjingzhuang.com