zoukankan      html  css  js  c++  java
  • 如何将 16进制字符串形式的图片显示到页面上

    前言:如果数据库中存放的图片信息不是图片的链接,而是存放图片的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,这样就完成了。

  • 相关阅读:
    js格式化时间和时间操作
    java链接FTP实现上传和下载
    JQuery 对 Select option 的操作
    利用set实现去重
    数组去重的五个办法
    JavaScript实现360度全景图片展示效果
    对于行高(line-height)的一些理解
    Flex 布局教程:语法篇
    学习Javascript闭包
    MySQL explain字段解释
  • 原文地址:https://www.cnblogs.com/Garnett-Boy/p/7452214.html
Copyright © 2011-2022 走看看