阿里云图片服务缩略图使用方法及问题解决

目前团队开发的app，后端服务全部假设在阿里云服务器。体验到了阿里云oss图片服务的便利性。

手册地址

图片处理提供以下功能：

• 获取图片信息
• 图片格式转换
• 图片缩放、裁剪、旋转
• 图片添加图片、文字、图文混合水印
• 自定义图片处理样式
• 通过管道顺序调用多种图片处理功能

具体内容可参考官网地址：https://help.aliyun.com/document_detail/44686.html?spm=5176.doc32207.6.937.iEYG5k

获取图片的缩略图

通过在图片的url路径后添加处理参数来实现。使用代码示例如下

    /**
     * @param oriUrl 原url
     * @param width  缩略图的宽度
     * @return 缩略图的url
     */
    public static String getThumbnailResourceUrl(String oriUrl, int width, int height) {
        if (oriUrl == null || !oriUrl.toLowerCase().startsWith("http:")) {
            return oriUrl;
        }
        StringBuffer result = new StringBuffer();
        result.append(oriUrl);
        result.append("@");
        result.append(String.valueOf(width));
        result.append("w_");
        result.append(String.valueOf(height));
        result.append("h_1l");
        if (oriUrl.toLowerCase().endsWith(".gif")) {
            result.append(".gif");
        } 
        return result.toString();
    }

但是该方案存在问题，png图片背景显示为黑色。查阅图片服务手册（旧版），当前受用的缩略模式是指定广告缩放，具体见https://help.aliyun.com/document_detail/32218.html?spm=5176.doc32219.6.978.JX0ymF。其中关键注意事项如下：

如果不指定格式，原图将默认转换成jpg格式，如果原图是png, webp, bmp可能会导致图出现变形。详细可以查看质量变换及格式转换。

根据上述语句，该问题的解决方案就是：指定图片的格式。
如何指定图片格式呢，最终在基本概念页面找到了如下说明。

基本概念.png

最终解决方案如下，在url后加上".png"。gif图片显示同理

    public static String getThumbnailResourceUrl(String oriUrl, int width, int height) {
        if (oriUrl == null || !oriUrl.toLowerCase().startsWith("http:")) {
            return oriUrl;
        }
        StringBuffer result = new StringBuffer();
        result.append(oriUrl);
        result.append("@");
        result.append(String.valueOf(width));
        result.append("w_");
        result.append(String.valueOf(height));
        result.append("h_1l");
        if (oriUrl.toLowerCase().endsWith(".gif")) {
            result.append(".gif");
        } else if (oriUrl.toLowerCase().endsWith(".png")) {
            result.append(".png");
        }
        return result.toString();
    }

图片旋转

个别手机拍摄的照片带有旋转参数（存放在照片exif信息里面），如部分三星手机拍照有旋转90度。这个时候获取缩略时，需要自动旋转。
参考自适应方向的说明文档，如下，

image.png

解决方案是url后添加o参数。代码如下：

    public static String getThumbnailResourceUrl(String oriUrl, int width, int height) {
        if (oriUrl == null || !oriUrl.toLowerCase().startsWith("http:")) {
            return oriUrl;
        }
        StringBuffer result = new StringBuffer();
        result.append(oriUrl);
        result.append("@");
        result.append(String.valueOf(width));
        result.append("w_");
        result.append(String.valueOf(height));
        result.append("h_1l_2o");
        if (oriUrl.toLowerCase().endsWith(".gif")) {
            result.append(".gif");
        } else if (oriUrl.toLowerCase().endsWith(".png")) {
            result.append(".png");
        }
        return result.toString();
    }