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)图片质量设置的低一点,只是预览效果,设置好这三个属性后就可以正常的预览图片了。

由于后台还没有写好,所以今天就暂时先不写上传图片了