将图像的字节 [] 从 Spring Controller 发送到 jQuery答案

【问题标题】：Send byte[] of image from Spring Controller to jQuery将图像的字节 [] 从 Spring Controller 发送到 jQuery
【发布时间】：2016-02-09 07:25:46
【问题描述】：

请告诉我如何从 Spring Controller 获取图像并在 html 上显示其图像？现在我正在尝试：

@RequestMapping(value = "dictionaries/getImage", method = RequestMethod.GET, produces = MediaType.ALL_VALUE)
@ResponseBody
public byte[] getImage(@RequestParam Long ticketTemplateId, @RequestParam String imageName) throws IOException{
    Long eventOrganizerId = eventOrganizerService.getCurrentUserOrganizerProfile().getId();
    byte[] result = fileStorageService.getImage(ticketTemplateId, eventOrganizerId, imageName);

    return result;
}

jQuery 代码：

function downloadImage() {
            var imageName = $('#slc option:selected').val();
            var ticketTemplateId = getParameterByName('id');
            $.ajax({
                url: 'getImage',
                type: 'GET',
                data: ({ticketTemplateId: ticketTemplateId, imageName: imageName}),
                success: function(data) {
                    document.getElementById("ItemPreview").src = "data:image/png;base64," + data;
                }
            })
        }

在浏览器控制台中我收到此错误：

 data:image/png;base64,%EF%BF%BDPNG%1A%00%00%00IHDR%00%00%00%EF%BF%BD%00%00%…%EF%BF%BD5%EF%BF%BD0%EF%BF%BD%EF%BF%BD%00%00%00%00IEND%EF%BF%BDB`%EF%BF%BD net::ERR_INVALID_URL

【问题讨论】：

尝试将produces 更改为MediaType.IMAGE_PNG_VALUE。
@shmosel 不幸的是我有同样的错误信息

标签： java jquery spring image byte

【解决方案1】：

您不能使用 ajax 发送原始字节，它会尝试将它们解释为 Utf-16 字符串。

您可以在服务器上使用 Base64 对这些字节进行编码，然后直接使用编码字符串设置 src 属性，与您正在使用的 js 代码完全相同。

在 java 端你只需要return Base64.getEncoder().encodeToString(result)

【讨论】：