如何将 16进制字符串形式的图片显示到页面上

Posted 2020-10-04 Garnett_Boy

前言：如果数据库中存放的图片信息不是图片的链接，而是存放图片的16进制字符串（这种存放方式很low，很影响数据库查询效率，还是存放图片链接好）。这时如果想要将图片显示在jsp页面上，java代码应该怎么处理了？

例如：（图片和它的16进制编码）

处理步骤：

 1、后台代码剪辑

import cn.com.syan.spark.app.sdk.connect.utils.http.BASE64Encoder;

//处理代码
BASE64Encoder encoder = new BASE64Encoder();
ActionContext.getContext().put("headimg", "data:image/jpeg;base64," + encoder.encode(HexToByte(listImg.get(0).getImageHead()))); //将图片放入上下文中


/**
     * 将16进制字符串转化为byte[]
     * @param hexString
     * @return
     */
    public static byte[] HexToByte(String hexString){
        int len = hexString.length();
        byte[] b = new byte[len / 2];
        for (int i = 0; i < len; i += 2) {
            // 两位一组，表示一个字节,把这样表示的16进制字符串，还原成一个字节
            b[i / 2] = (byte) ((Character.digit(hexString.charAt(i), 16) << 4) + Character
                    .digit(hexString.charAt(i + 1), 16));
        }
        return b;
    }

2、jsp页面接收（我是使用struts2获取了上下文里的headimg）

 <img width="100%"  src="<s:property value=\'#headimg\'/>" /> 

 

 

后续补充：

使用前面介绍的16进制字符串转码显示可以实现基本需求，但是在之后的项目中发现弊端实在是太大，转换效率太低，导致页面加载速度慢到龟速，后修改方案如下：

将存储16进制的图片的字段由String转为 Blob 类型。后台处理代码如下：

注意：RlUserinfoBak实体类中的图片字段为：private Blob imageHead;

1、后台代码

/*获取头像*/
        List<List<?>> list = filemodificationservice.getCompareUserInfo(BizGUID);
        List<RlUserinfoBak> listImg = (List<RlUserinfoBak>) list.get(0);
        BASE64Encoder encoder = new BASE64Encoder();
        BufferedInputStream is = null;  
        if(listImg.get(0).getImageHead()!=null){
            is = new BufferedInputStream(listImg.get(0).getImageHead().getBinaryStream());  
            byte[] bytes = new byte[(int) listImg.get(0).getImageHead().length()];  
            int len = bytes.length;  
            int offset = 0;  
            int read = 0;  
            while (offset < len  
                    && (read = is.read(bytes, offset, len - offset)) >= 0) {  
                offset += read;  
            }  
            
            
            
                ActionContext.getContext().put("headimg", "data:image/jpeg;base64," + encoder.encode(bytes)); //编码后的数据前面加
            }

2、前端代码和之前一样

 

OK，这样就完成了。