web图片读取与二进制方式请求解析展示

1、java web  后端代码

@RequestMapping(value = {"/img/render"}, method = {RequestMethod.GET, RequestMethod.POST, RequestMethod.OPTIONS})
    @CrossOrigin
    @ResponseBody
    public String getPic(HttpServletRequest httpServletRequest,
                         HttpServletResponse httpServletResponse) {

        String path = "C:\\Users\\admin\\Pictures\\11.jpg";
        FileInputStream fis = null;
        OutputStream os = null;
        try {
            fis = new FileInputStream(path);
            os = httpServletResponse.getOutputStream();
            int count = 0;
            byte[] buffer = new byte[1024 * 8];
            while ((count = fis.read(buffer)) != -1) {
                os.write(buffer, 0, count);
                os.flush();
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
        try {
            fis.close();
            os.close();
        } catch (IOException e) {
            e.printStackTrace();
        }
        return "ok";
    }

2、web前端代码

function getpic(url,imgContainer) {
        var xhr = new XMLHttpRequest();
        xhr.open("get", url, true);
        xhr.responseType = "blob";
        xhr.onload = function() {
            if (xhr.status == 200||xhr.status == 304) {
                var blob = xhr.response;
                var img = document.createElement("img");
                img.onload = function(e) {
                    window.URL.revokeObjectURL(img.src);
                };
                img.src = window.URL.createObjectURL(blob);
                $(imgContainer).html(img);
                $("#basedataPicWinDiv").window("open");
            } else {
                console.log("Error", xhr.statusText);
            }
        }
        xhr.send();
    }

getpic('http://localhost:8086/img/render',"#basedataPicWinDiv");

 

来源：https://www.cnblogs.com/dog2016/p/11691674.html