如何在App中实现IM功能

之五

快速实现图片接收和发送

社交App中，用户聊天发送或接收图片，是一个非常常见的场景，这里给大家介绍如何利用Arrownock的anSocial的Photo API与anIM结合，来实现发送和接收图片。

发送端详情

当发送方选择好图片点击发送时，为了不影响用户聊天过程中的体验，我们一般会将消息先插入到sqlite数据库中，刷新界面，给这条消息加上Loading动画，表示发送中。而这背后的操作为了能够节省流量的消耗，开发时因为图片往往比较大，所以并不是直接将图片的二进制数据传输过去，而是先将图片压缩一下，再传输过去。

具体实现方式

anSocial的Photo API已经提供了多种任意压缩的尺寸，以Android开发为例，可以这么调用：

    //组装上传创建且压缩photo的数据
    Map<String, Object> params = new HashMap<String, Object>();
    InputStream inputStream = context.getResources().getAssets().open("testPhoto.png");
    //上传文件时需要使用AnSocialFile
    AnSocialFile file = new AnSocialFile("testPhoto.jpg", inputStream);
    params.put("photo", file);
    //组装想要压缩的尺寸
    Map<String, String> resolutions = new HashMap<String,String>();
    resolutions.put("small", "200x200");
    resolutions.put("middle", "400x400");
    params.put("resolutions", resolutions);

    try {
        //调用createPhoto API 上传图片
        anSocial.sendRequest("photos/create.json", AnSocialMethod.POST, 
            params, new IAnSocialCallback() {
            @Override
            public void onSuccess(JSONObject response) {
                try {
                    //上传图片成功后，根据返回的数据拿到原图的url，中等图，小图
                    JSONObject photo =response.getJSONObject("response")
                        .getJSONObject("photo");
                    String fileUrl =photo.getString("url");
                    String smallPhotoPath =photo.getJSONObject("resolutions")
                        .getString("small");
                    String middlePhotoPath= photo.getJSONObject("resolutions")
                        .getString("middle");
                    //组装原图，中等图，小图的url
                    Map<String, String>customMap = new HashMap<String,String>();
                    customMap.put("smallPhotoPath", smallPhotoPath);
                    customMap.put("middlePhotoPath", middlePhotoPath);
                    customMap.put("url", fileUrl);
                    //因为已经图片已经上传到服务器，所以聊天消息可以只发送一个空数组
                    byte[] b = new byte[1];
                    //调用anIM的sendBinary方法
                    anIM.sendBinary(clientId,b, "image", customMap);
                } catch (JSONException e) {
                }
            }
            @Override
            public void onFailure(JSONObject arg0) {
            }
        });
    } catch (ArrownockException e) {
    }

从上面的代码里可以看到，发送聊天消息时，只发送了图片地址。 在发送消息成功后，再刷新界面，将Loading动画去掉。

接收端详情：

接收方拿到消息时，从customData中可以根据设备的不同，屏幕大小的不同来获取不同的图片尺寸并展示到界面中。只有当用户点击图片时，才会跳转到一个展示图片的新界面中加载原图。

如何在App中实现IM功能系列文章：

之一离线消息常见浅析

之二快速实现离线消息模块

之三快速实现离线消息推送模块

之四创建稳健的消息发送模块

之五快速实现图片接收和发送

之六快速实现群聊的高级功能

之七快速实现聊天列表排序模块