2021-02-20

该博文介绍了如何处理不在本地的图片资源,通过将其转换为Base64编码来实现在HTML页面上的显示。文章详细阐述了从HTTP请求获取图片数据,转化为Base64字符串,并在前端利用JavaScript实现点击放大图片的功能。同时,提供了相关的后端代码片段,展示了如何处理HTTP请求,获取图片资源并转化为Base64格式。
摘要由CSDN通过智能技术生成

工作中处理数据记录

项目场景:

图片资源不在本地,不可通过如下路径方式去直接进行图片展示

实现效果:


问题描述:

图片资源不在本地,不可通过如下路径方式去直接进行图片展示
html代码:

<p><img width="60" height="60" th:src="D:/image/face/123.jpg"></p>

 


解决方案:

这里通过图片的base64资源数据进行展示

html代码:

<!-- 图片接收 -->
<img class="zoomImg" src="{{ d.imageBase64 }}" style="width:30px; height:30px;">

//点击放大图片
$("body").on("click", '.zoomImg', function () {
   var imgsrc = $(this).attr('src');
      //imgsrc = '/images/' + imgsrc.split("images/")[1];
   top.layer.open({
   type: 1,
   title: false,
   closeBtn: 1,
   area: ['500px', '500px'],  //弹出层页面比例
   skin: 'layui-layer-nobg', //没有背景色
   shadeClose: true,
   content: '<img src="' + imgsrc + '" style="width: 100%;height: 100%;">'
 });
})

后台代码:

/**
     * @Description: 根据学工号/姓名查询ETS行业云人脸信息(学工号和姓名可不填)
     * @Param: [request, workNo, name]
     * @return: com.ets.accessweb.dto.ResultDto
     * @author: wangguanghui
     */
    @GetMapping("/getAceFaceInfo")
    @ResponseBody
    public ResultDto getAceFaceInfoByPage(HttpServletRequest request, HttpServletResponse response, String workNoOrName,
                                          Integer[] deptIdList, PageInfo pageInfo) {

        JwtUserModel jwtUserModel = (JwtUserModel) request.getAttribute("jwtUser");
        String legalPersonCode = jwtUserModel.getLegalPersonCode();

        //获取到门禁人脸信息
        ObjectResponseStatus<ResultPage<AccessFaceDto>> responseStatus = accessFaceInfoClient.queryETSFaceMessageByWorkNoOrName(legalPersonCode, workNoOrName, deptIdList, pageInfo);

        if (!responseStatus.isSuccess()) {
            return fail("获取用户信息失败,原因是:" + responseStatus.getMessage());
        }

        ResultPage<AccessFaceDto> resultPage = responseStatus.getData();

        List<AccessFaceDto> accessFaceDtoList = new ArrayList<>();
        List<AccessFaceDto> accessFaceDtos = resultPage.getData();

        // http请求调用数据获取图片byte[]
        for (AccessFaceDto accessFaceDto : accessFaceDtos) {
            AbstractStatusObject statusObject = null;
            try {
                // 存储http请求数据
                Map<String, Object> requestMap = new HashMap<>();
                // http远程调用程序获取图片资源
                requestMap.put("modeString", 1);
                requestMap.put("custCode", accessFaceDto.getCustCode());
                requestMap.put("legalPersonCode", legalPersonCode);
                requestMap.put("lastPack", "");
                String resp = httpClient.doPost(url.trim() + getBinaryFaceMessage, requestMap);

                if (StringUtils.isNotBlank(resp)) {
                    statusObject = JSONObject.parseObject(resp, AbstractStatusObject.class);
                }

                if (statusObject != null && statusObject.getStatus() == 0) {
                    String imageString = statusObject.getData().toString();
                    imageString = "data:image/jpg;base64," + imageString.replaceAll("\n", "").replaceAll("\r", "");
                    accessFaceDto.setImageBase64(imageString);
                }
                accessFaceDtoList.add(accessFaceDto);
            } catch (Exception e) {
                e.printStackTrace();
                return fail("获取用户信息失败,原因是:" + responseStatus.getMessage());
            }
        }

        resultPage.setData(accessFaceDtoList);
        return success(resultPage);
    }

注意:base64Image资源需要加上前缀"data:image/jpg;base64,"

AbstractStatusObject响应实体类:
package com.ets.ecard.dto.kernel.gateway;

import lombok.Data;

/**
 * @Author:FLyhooo
 * @Description:带返回状态的实体
 * @Date: Created at 2019/7/9
 * @Moditify By:
 */
@Data
public class AbstractStatusObject extends AbstractObject {

    private Integer status;
    private String message;

    private Object data;
}

HttpClient代码:

/**
     * post请求
     * 返回判断 StringUtils.isEmpty()
     * 为空则需做查询处理
     *
     * @param url
     * @param params
     * @return
     */
    public String doPost(String url, Map params) {
        // 创建httpClient
        CloseableHttpClient httpclient = HttpClients.custom()
                .setConnectionManager(cm)
                .setConnectionManagerShared(true)
                .setDefaultRequestConfig(requestConfig)
                .setKeepAliveStrategy(keepAliveStrategy)
                .build();

        BufferedReader in = null;
        try {
            // 实例化HTTP方法
            HttpPost request = new HttpPost();
            request.setURI(new URI(url));

            //设置参数
            List<NameValuePair> nvps = new ArrayList<>();
            for (Iterator iter = params.keySet().iterator(); iter.hasNext(); ) {
                String name = (String) iter.next();
                String value = String.valueOf(params.get(name));
                nvps.add(new BasicNameValuePair(name, value));
            }
            request.setEntity(new UrlEncodedFormEntity(nvps, "UTF-8"));

            HttpResponse response = httpclient.execute(request);
            int code = response.getStatusLine().getStatusCode();
            if (code == HttpStatus.SC_OK) {//请求成功
                HttpEntity responseEntity = response.getEntity();
                String str = EntityUtils.toString(responseEntity, "UTF-8");
                return str;
            }

        } catch (Exception e) {
            e.printStackTrace();

        } finally {
            if (httpclient != null) {
                try {
                    httpclient.close();
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
        }
        return null;
    }

HTTP远程请求Controller代码:

 /**
     * 通过数据获取相应图片/压缩包二进制数据
     *
     * @param modeString      下载模式 1:照片 2:特征值 3:照片打包 4:特征值打包
     * @param custCode        当mode为1、2客户编码为必选项
     * @param legalPersonCode 法人编码
     * @param lastPack        批量名单包名 批量打包分 全量包名格式:yyyyMMdd 时段增量包名格式:yyyyMMddHH
     */
    @RequestMapping("/getBinaryFaceMessage")
    public SelectFaceResponse getBinaryFaceMessage(String modeString, String custCode, String legalPersonCode,
                                                   String lastPack) {

        SelectFaceResponse response;

        if (StringUtils.isBlank(modeString) || StringUtils.isBlank(legalPersonCode)) {
            return SelectFaceResponse.fail(CommonRestCodeEnum.DEFAULT_VALUE);
        }

        String sourcePath = platformPhotoDir + legalPersonCode;
        File file = null;

        log.info("请求参数," + "mode: " + modeString + ",legal_person_code: " + legalPersonCode + ",cust_code: " + custCode +
                ",last_pack: " + lastPack);
        Integer mode = Integer.valueOf(modeString);

        switch (mode) {
            // 图片下载
            case 1:
                if (StringUtils.isBlank(custCode)) {
                    return SelectFaceResponse.fail(CommonRestCodeEnum.DEFAULT_VALUE);
                }
                file = new File(sourcePath + "/" + custCode + ".jpg");
                break;
            // 特征值下载
            case 2:
                break;
            // 照片压缩包下载
            case 3:
                if (StringUtils.isBlank(lastPack)) {
                    return SelectFaceResponse.fail(CommonRestCodeEnum.DEFAULT_VALUE);
                }
                file = new File(sourcePath + "/" + lastPack + ".zip");
                break;
            // 特征值压缩包下载
            case 4:
                break;
            default:
                break;
        }

        if (file == null || !file.exists()) {
            return SelectFaceResponse.fail(CommonRestCodeEnum.FILES_NOT_EXIST);
        }

        response = ZipGenerateUtils.getFileByName(file, mode);
        if (response.isSuccess()) {
            log.info("获取图片/压缩包二进制数据成功");
        } else {
            log.info("获取图片/压缩包二进制数据失败");
        }

        return response;
    }

ZipGenerateUtils代码:

 private static BASE64Encoder encoder = new BASE64Encoder();
 private static BASE64Decoder decoder = new BASE64Decoder();

/**
     * 根据相对路径获取二进制数据
     *
     * @param file 目标文件
     * @param mode 获取类型
     */
    public static SelectFaceResponse getFileByName(File file, Integer mode) {

        FileInputStream fileInputStream = null;
        ByteArrayOutputStream byteArrayOutputStream = new ByteArrayOutputStream();
        byte[] bytes;
        String base64Message = null;

        try {
            switch (mode) {
                case 1:
                    BufferedImage bufferedImage = ImageIO.read(file);
                    ImageIO.write(bufferedImage, "jpg", byteArrayOutputStream);
                    bytes = byteArrayOutputStream.toByteArray();
                    // 通过base64加密传输
                    base64Message = encoder.encodeBuffer(bytes).trim();
                    break;
                case 2:
                    break;
                case 3:
                    // 将zip文件数据读入输入流中
                    fileInputStream = new FileInputStream(file);
                    byte[] buffer = new byte[2048];
                    int count;
                    while ((count = fileInputStream.read(buffer)) >= 0) {
                        byteArrayOutputStream.write(buffer, 0, count);
                    }
                    bytes = byteArrayOutputStream.toByteArray();
                    // 通过base64加密传输
                    base64Message = encoder.encodeBuffer(bytes).trim();
                    break;
                case 4:
                    break;
                default:
                    break;
            }

            return SelectFaceResponse.success(base64Message);
        } catch (Exception e) {
            e.printStackTrace();
            return SelectFaceResponse.fail("获取文件流失败" + e.getMessage());
        } finally {
            closeOutputStream(byteArrayOutputStream);
            closeInputStream(fileInputStream);
        }
    }
SelectFaceResponse响应实体类代码:
package com.ets.ecard.dto;

import lombok.Data;

/**
 * 响应请求参数
 */
@Data
public class SelectFaceResponse implements Response {

    private static final long serialVersionUID = -2084916197659988086L;

    /**
     * 状态
     */
    private Integer status;

    /**
     * 描述信息
     */
    private String message;

    /**
     * 返回数据
     */
    private Object data;


    private SelectFaceResponse(ResultCode resultCode, Object data) {
        this.status = resultCode.getStatus();
        this.message = resultCode.getMessage();
        this.data = data;
    }

    private SelectFaceResponse(String message, Object data) {
        this.status = CommonRestCodeEnum.FAIL.getStatus();
        this.message = message;
        this.data = data;
    }

    private SelectFaceResponse(Integer status, String message, Object data) {
        this.status = status;
        this.message = message;
        this.data = data;
    }

    public boolean isSuccess() {
        return status == 0;
    }

    public static SelectFaceResponse success(Object data) {
        return new SelectFaceResponse(CommonRestCodeEnum.SUCCESS, data);
    }

    public static SelectFaceResponse fail(ResultCode resultCode) {
        return new SelectFaceResponse(resultCode, null);
    }

    public static SelectFaceResponse fail() {
        return new SelectFaceResponse(CommonRestCodeEnum.FAIL, null);
    }

    public static SelectFaceResponse fail(String message) {
        return new SelectFaceResponse(message, null);
    }

    public static SelectFaceResponse fail(Integer status, String message) {
        return new SelectFaceResponse(status, message, null);
    }
}

参考:

网址: https://www.cnblogs.com/xuehuashanghe/p/10300427.html

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值