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