开发者社区> 阿策~> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

Android 分享微信小程序之图片优化

简介:
+关注继续查看

      小菜上周接入了微信分享小程序的入口,基本功能实现都没问题,有需要的朋友可以了解一下 Android 分享微信小程序失败二三事,虽然功能都正常,但整体测试发现图片展示效果不佳。于是小菜整理了一个简单的小方法处理一下图片!

      微信规定,分享小程序展示的图片应该在 128KB 以内,同时图片默认展示比例为 5:4,这样小菜默认的图很多是竖直的图,只会展示一部分。

遮挡部分图片

规定

      小菜尝试了图片的【等比压缩】【非等比压缩】和【不压缩】,效果依旧不合适,图片所占位置默认以横向方向填充满分享出的布局。于是小菜决定重新用 Canvas 绘制一张图,将所要展示的图片居中展示,整理方法如下:

public static Bitmap drawWXMiniBitmap(Bitmap bitmap, int width, int height) {
    Bitmap mBitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
    // 用这个Bitmap生成一个Canvas,然后canvas就会把内容绘制到上面这个bitmap中
    Canvas mCanvas = new Canvas(mBitmap);
    // 绘制画笔
    Paint mPicturePaint = new Paint();
    // 绘制背景图片
    mCanvas.drawBitmap(mBitmap, 0.0f, 0.0f, mPicturePaint);
    // 绘制图片的宽、高
    int width_head = bitmap.getWidth();
    int height_head = bitmap.getHeight();
    // 绘制图片--保证其在水平方向居中
    mCanvas.drawBitmap(bitmap, (width - width_head) / 2, (height - height_head) / 2,
        mPicturePaint);
    // 保存绘图为本地图片
    mCanvas.save();
    mCanvas.restore();
    return mBitmap;
}

      小菜测试时发现,很多图片的尺寸大小和宽高比并非固定的,为了适配整体展示效果,当宽高比小于1时,根据图片高度来计算整体绘制 Bitmap 宽,Bitmap 可以根据需求展示相应的本地资源图或网络图,宽高可以直接设置 5:4 大小,小菜测试 width = 300; height = 240 整体效果较为合适。大家可以根据个人需求自定义图片样式。

Bitmap bitmap = BitmapUtil.drawWXMiniBitmap(bitmap, bitmap.getHeight() * 5 / 4, bitmap.getHeight());
if (BitmapUtil.isOverSize(bitmap, 128)) {
    bitmap = Utils.resizeBitmap(bitmap, 300, 240);
}

      Tips: 绘制完成之后的图会比原图大,所以需要先绘制图片,再判断图片是否超过 128KB。若超过 128KB 需要进行压缩,公共的方法暂时就省略啦!


      内容很少,有问题的地方还请多多指教!

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Android异步加载图片详解之方式二(3)
main.xml如下:   listviewitem.xml如下:   ...
746 0
Android异步加载图片详解之方式二(2)
FileCache.java如下: package com.cn.loadImages; import java.io.File; import java.
772 0
Android异步加载图片详解之方式一(2)
FileCache.java如下: package cn.loadImages; import java.io.File; import android.
735 0
Android异步加载图片详解之方式二(1)
MainActivity.java如下: package com.cn.perfectlistview; import java.util.ArrayList; import android.
808 0
Android异步加载图片详解之方式一(4)
main.xml如下: listviewitem.xml如下:  
727 0
Android异步加载图片详解之方式一(3)
Utils.java如下: package cn.loadImages; import java.io.InputStream; import java.
785 0
Android异步加载图片详解之方式一(1)
MainActivity.java如下: package cn.ideallistview; import java.util.ArrayList; import android.
869 0
【Android 应用开发】Android开发技巧--Application, ListView排列,格式化浮点数,string.xml占位符,动态引用图片
【Android 应用开发】Android开发技巧--Application, ListView排列,格式化浮点数,string.xml占位符,动态引用图片
155 0
Android开发重要参考资料
=======================博客============================= 秋百万 有心课堂 郭霖 源码 安装ffmpeg 胡凯 官方培训课程 litesuitsway 爱哥 trinea robinRobin Hu...
850 0
+关注
阿策~
Android/Kotlin/Flutter 小菜鸟,基础技术博客学习与整理~
文章
问答
文章排行榜
最热
最新
相关电子书
更多
《深入探索Android热修复技术原理》电子书
立即下载
Android插件化-从入门到"放弃"
立即下载
《深入探索Android热修复技术原理》
立即下载