如何从 Java 服务器端发送图像，并在 JQuery 客户端处理它答案

【问题标题】：How to send an image from Java-serverside, and handle it on JQuery-clientside如何从 Java 服务器端发送图像，并在 JQuery 客户端处理它
【发布时间】：2011-10-13 11:15:35
【问题描述】：

我想重新缩放图像并将其返回给客户端，但在将图像发送回客户端时遇到了一些问题。

我的服务器端控制器：

@RequestMapping(value = {"/fw/ajax/submit_profileimage.do"})
public void submitFile(HttpServletRequest request, HttpServletResponse response, @RequestParam("file") MultipartFile f) {
    try {
        InputStream in = new ByteArrayInputStream(f.getBytes());
        BufferedImage originalImage = ImageIO.read(in);
        BufferedImage newImage = new BufferedImage(MAX_HEIGHT, MAX_WIDTH, BufferedImage.TYPE_INT_RGB);
        paintComponent(newImage.getGraphics(), originalImage, getRatio(originalImage));

        ImageIO.write(newImage, "png", response.getOutputStream());
        response.setContentType("image/png");
        response.getOutputStream().flush();
        response.getOutputStream().close();
    } catch (Exception ex) {
        ex.printStackTrace();
    }
}

客户端 Jquery 代码：

uploadButton.click(function(){
    $('#imagePreview').addClass('loading');
    form.ajaxSubmit(function(data){
    alert(data); //this is where I'd like to handle the image!
    });
});

ajaxSubmit 返回的数据是：

"<body style="margin: 0px;"><img style="-webkit-user-select: none" src="http://localhost:8080/fairview/ajax/submit_profileimage.do"></body>"

显然不是图像文件。但是当我检查调试器时，我可以看到 submit_profileimage.do 请求已经成功，并且据称返回了一个图像！我不知道我是在客户端还是在服务器端做错了什么。

所以问题是：如何在客户端显示图像？

【问题讨论】：

标签： java jquery ajax image servlets

【解决方案1】：

我只需将调整大小的图像保存在服务器上，然后返回给 jquery simpy 一个 URL，该 URL 将保存调整大小的图像。然后只需将图像的 src 属性设置为该 URL。浏览器将负责下载图像。

uploadButton.click(function(){
    $('#imagePreview').addClass('loading');
    form.ajaxSubmit(function(data){
        //Assuming data is the URL to the resized image.
        $("#myimage").attr("src", data);
    });
});

【讨论】：

由于业务需求，图像不会保存为文件，而是保存为字节数组。我认为虽然将图像作为字节数组发送是不必要的，但只需使用 ImageIO 发送回缩放图像。我可能以错误的方式解决这个问题吗？

【解决方案2】：

我采用了此处描述为公认答案的方法：Help getting image from Servlet to JSP page

这几乎意味着我没有真正回答最初的问题，我仍然无法处理原始图像客户端。相反，我使用一个服务来存储图像，返回图像存储位置的 id，并将图像的 src 属性设置为将返回图像的服务。

【讨论】：