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

Question

I want to rescale an image and return it to the client, and am running into some trouble with sending the image back to the client. 我想重新缩放图像并将其返回给客户端，并且在将图像发送回客户端时遇到了一些麻烦。

My serverside controller: 我的服务器端控制器：

@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();
    }
}

Clientside Jquery code: 客户端Jquery代码：

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

the data that is returned by the ajaxSubmit is: ajaxSubmit返回的数据是：

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

Clearly not an image file. 显然不是图像文件。 But when I check the debugger, I can see that the submit_profileimage.do request has succeded, and allegedly returned an image! 但是，当我检查调试器时，可以看到submit_profileimage.do请求成功，并且据称返回了图像！ I have no idea if I've done something wrong on the clientside, or on the serverside. 我不知道我是在客户端还是在服务器端做错了什么。 调试器 - 信息 - 概述调试器的信息，详细介绍

So the question is: How can I display the image on the clientside? 所以问题是：如何在客户端显示图像？

Answer 1

I would simply save the resized image on the server and return back to jquery simpy a URL to where the resized image has been saved. 我只是将调整大小后的图像保存在服务器上，然后返回到jQuery simpy，返回保存了调整大小后的图像的URL。 Then simply set the src attribute of the image to that URL. 然后只需将图像的src属性设置为该URL。 The browser will than take care of downloading the image. 然后，浏览器将负责下载图像。

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

Answer 2

You might be looking for " inline images ". 您可能正在寻找“ 内嵌图像 ”。

Here is java solution. 这是java解决方案。

Have a nice day ! 祝你今天愉快！

Answer 3

I went with the approach described as the accepted answer here: Help getting image from Servlet to JSP page 我采用的方法在这里被描述为公认的答案：帮助将图像从Servlet获取到JSP页面

Which pretty much means I didn't really answer the initial question, I still can't handle a raw image clientside. 这几乎意味着我没有真正回答最初的问题，我仍然无法处理原始图像客户端。 Rather, I use one service to store the image, return the id of where the image is stored, and set the src attr of the image to a service that will return the image. 相反，我使用一种服务来存储图像，返回图像存储位置的ID，并将图像的src属性设置为将返回图像的服务。

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

问题描述

3 个解决方案

解决方案1
3 2011-10-13 11:21:53

解决方案2
1 2011-10-13 11:43:11

解决方案3
0 已采纳 2011-10-13 14:23:03

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

问题描述

3 个解决方案

解决方案1 3 2011-10-13 11:21:53

解决方案2 1 2011-10-13 11:43:11

解决方案3 0 已采纳 2011-10-13 14:23:03

解决方案1
3 2011-10-13 11:21:53

解决方案2
1 2011-10-13 11:43:11

解决方案3
0 已采纳 2011-10-13 14:23:03