通过URL接受图片并展示

通过RestTemplate访问指定的URL地址接收数据。将图片在界面展示出来。

PictureController.java

package cn.cw.controller;

import java.util.ArrayList;
import java.util.List;

import javax.servlet.http.HttpServletRequest;

import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Controller;
import org.springframework.util.LinkedMultiValueMap;
import org.springframework.util.MultiValueMap;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.client.RestTemplate;
import org.springframework.web.servlet.ModelAndView;

import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject;

import cn.cw.util.DateUtil;

@Controller
@RequestMapping("/picture")
public class PictureController {
    
    @Value("${cma.history.pictureUrl}") 
    private String url;
    
    @RequestMapping("/index.do")
    @ResponseBody
    public ModelAndView index() {
        
        return new ModelAndView("biz/picture");
    }
    
    @RequestMapping("/getPicture.do")
    @ResponseBody
    public String getPicture(HttpServletRequest request) {
        
        String id = request.getParameter("terminalId");
        String begin = request.getParameter("begin");
        String end = request.getParameter("end");
        
        JSONObject resultJson = new JSONObject();
        List<Object> data  = new ArrayList<Object>();
        RestTemplate restTemplate = new RestTemplate();
        MultiValueMap<String, String> requestEntity = new LinkedMultiValueMap<>();
        
        requestEntity.add("id", id);
        requestEntity.add("begin", begin);
        requestEntity.add("end", end);
        String response = restTemplate.postForObject(url, requestEntity, String.class);

        JSONArray resArr = JSON.parseArray(response);
        
        if(resArr.size()>0){
              for(int i=0;i<resArr.size();i++){
                JSONObject job = resArr.getJSONObject(i);
                job.replace("time_stamp", DateUtil.timeStampToDate(job.getString("time_stamp")));
                data.add(job);//cmd_id  imagePath   time_stamp
              }
            resultJson.put("data", data);
            resultJson.put("state", true);
            return resultJson.toJSONString();
        }else {
            resultJson.put("data", data);
            resultJson.put("state", false);
            return resultJson.toJSONString();
        }
    }
    
}

picture.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>历史图片查询</title>
    <!--公共资源开始-->
    <%
    include("../common/common.html"){}
    %>
    <link rel="stylesheet" href="${ctxPath}/static/css/pictureViewer.css">
    <script src="${ctxPath}/static/js/pictureViewer.js"></script>
    <script src="${ctxPath}/static/js/jquery.mousewheel.min.js"></script>
    <!--公共资源结束-->
</head>
<body>

<form role="form" class="form-inline">
    <div class="center">
        <h5>
            终端ID:<input type="text" class="form-control input-sm" id="srh-terminalId">
            开始时间:<input type="text" class="form-control input-sm form_date" id="srh-begin"/>
             结束时间:<input type="text" class="form-control input-sm form_date" id="srh-end"/>
            <button type="button" class="btn btn-success btn-sm"
                    onclick="queryPicture();">查询
            </button>
        </h5>

    <div class="image-list" id="imgCon">
    </div>
    
    </div>
</form>

<script type="text/javascript">
    
    $(".form_date").datetimepicker({
        format: 'yyyy-mm-dd hh:ii:mm',
        autoclose: true,
        minView: 0,
        bootcssVer: 3,
        language: 'zh-CN',
        todayHighlight: true,
        todayBtn: true
    });
    var today = new Date().setHours(0, 0, 0, 0);
    $("#srh-begin").datetimepicker("setDate", new Date(today));
    $("#srh-end").datetimepicker("setDate", new Date(today + 86400000));

    
    function queryPicture() {

        if ($("#srh-terminalId").val() == '') {
            alertify.alert('提示', '终端ID不能为空!');
            return false;
        }

        if ($("#srh-begin").val() == '') {
            alertify.alert('提示', '开始时间不能为空!');
            return false;
        }
        
        if ($("#srh-time").val() == '') {
            alertify.alert('提示', '结束时间不能为空!');
            return false;
        }
        
        var url = '';
        var terminalId = $("#srh-terminalId").val();
        var begin = $("#srh-begin").val();
        var end = $("#srh-end").val();
        
        url = '${ctxPath}/picture/getPicture.do';
            
        $.ajax({
            url: url,
            data: {
                terminalId : terminalId,
                begin : begin,
                end : end
            },
            type: 'post',   
            cache: false,
            dataType: 'json',
            success: function (data) {
                if (data.state){
                    var ImageContent = "";
                    $.each(data.data, function (key, value) {
                        ImageContent += '<div class="cover"><p>'+value.cmd_id+'<br>'+value.time_stamp+'</p><img src="'+value.imagePath+'" alt=""></div>';
                    });
                    $('#imgCon').html(ImageContent);
                } else {
                    alertify.error('暂无数据!');
                }
            },
            error: function (msg) {
                console.log(msg);
            }
        });
    };
    
    $(function () {
        $('.image-list').on('click', '.cover', function () {
            var this_ = $(this);
            var images = this_.parents('.image-list').find('.cover');
            var imagesArr = new Array();
            $.each(images, function (i, image) {
                imagesArr.push($(image).children('img').attr('src'));
            });
            $.pictureViewer({
                images: imagesArr, //需要查看的图片，数据类型为数组
                initImageIndex: this_.index() + 1, //初始查看第几张图片，默认1
                scrollSwitch: true //是否使用鼠标滚轮切换图片，默认false
            });
        });
    });
    
</script>
</body>
</html>