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:

类型:数字

默认值:原图高度

描述:(可选项)压缩后的图片高度,图片会按比例适配此高度

如果targetWidthtargetHeight设置过小的时候(比如官方的100),图片就会照成失真,就是上面的显示结果,所以这两个属性设置不要太小,同时把quality(1-100)图片质量设置的低一点,只是预览效果,设置好这三个属性后就可以正常的预览图片了。

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

欢迎大家访问我的博客www.yuanjingzhuang.com

你可能感兴趣的:(APICloud)