来自rest api的图像/ png响应未在浏览器中显示答案

【问题标题】：image/png response from restapi not displaying in browser来自rest api的图像/ png响应未在浏览器中显示
【发布时间】：2019-07-30 14:03:49
【问题描述】：

在显示来自 REST API 的 b64 编码 png 图像响应时，我的图像图标已损坏。

javascript-

function getcap(){
            var http = new XMLHttpRequest()
            http.open("GET", "http://localhost:8888/newcaptcha",true)
            http.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");
            http.setRequestHeader("Access-Control-Allow-Origin", "http://localhost:8888");
            http.send()
            http.onload = () => {   
                var resp=unescape(encodeURIComponent(http.responseText));
                var b64Response = window.btoa(resp);
                console.log('data:image/png;base64,'+b64Response);
                document.getElementById("capimg").src =  'data:image/png;base64,'+b64Response;
            }
        }

html -

<div id="newCaptcha" onClick="getcap()" ><h5>new captcha:</h5><img id="capimg" width="30" height ="30"/></div>

b64 encoded response-

服务器代码 -

@CrossOrigin(origins = "http://localhost:8080")
    @RequestMapping(value = "/newcaptcha", method = RequestMethod.GET, produces = "image/png")
    public @ResponseBody byte[] getnewCaptcha() {
         try {
                 Random random = new Random();
                 imgkey= random.nextInt(3);
                 InputStream is = this.getClass().getResourceAsStream("/"+captcheMap.get(imgkey)+".png"); 
                 BufferedImage img = ImageIO.read(is);
                 ByteArrayOutputStream bao = new ByteArrayOutputStream();
                 ImageIO.write(img, "png", bao);
                 return bao.toByteArray();   
            } catch (IOException e) {
                throw new RuntimeException(e);
            }
    }

【问题讨论】：

你从“resp”值中得到什么？
服务器呢？ base64代码是如何生成的？
@luca.vercelli 服务器产生响应“image/png”并返回一个字节数组。
所以，您的网络服务器返回的是图像，而不是图像 b64……为什么要对它进行编码？你不能把图片放到你的IMG标签里吗？类似document.getElementById("capimg").src = "./newcaptcha"

标签： javascript java html spring rest

【解决方案1】：

如果我在浏览器中打开它，附加的 base 64 响应似乎并没有真正加载图像。其次，我可以看到可能导致这种情况的一个问题是重新加载 DOM 元素 img，如果它没有被任何框架处理，您可能必须手动干预。要检查这一点，您可以使用本地图像进行测试并加载它。如果它不起作用，那么你就有了根本原因。如果是这样，那么这个 base64 响应就是一个问题。此外，检查控制台是否有任何错误并在此处进行更新。

【讨论】：

【解决方案2】：

正如我在 cmets 中指出的那样，您可能不需要 b64。但是，如果你真的想要，请阅读此内容。

Stackoverflow 上有很多关于这个主题的问题，但答案很少。我已经把所有的部分放在一起了。

重点是btoa() 严重支持二进制数据。

在这里：convert binary data to base-64 javaScript，您可以找到使用 arraybuffers 作为响应类型的建议，而不仅仅是文本。

在这里：ArrayBuffer to base64 encoded string 你可以找到一个将数组缓冲区转换为 b64 的函数。

把所有的放在一起：

function getcap(){
            var http = new XMLHttpRequest();
            http.open("GET", "/newcaptcha",true);
            http.responseType = 'arraybuffer';
            http.send();
            http.onload = () => {
                console.log(http.response);
                var b64Response = _arrayBufferToBase64(http.response);
                document.getElementById("capimg").src =  'data:image/png;base64,'+b64Response;
            }
        }

function _arrayBufferToBase64( buffer ) {
    var binary = '';
    var bytes = new Uint8Array( buffer );
    var len = bytes.byteLength;
    for (var i = 0; i < len; i++) {
        binary += String.fromCharCode( bytes[ i ] );
    }
    return window.btoa( binary );
}

【讨论】：