来自restapi的图像/png响应未显示在浏览器中

Question

我在显示来自 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>服务器代码 -@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);            }    }

Answer 1

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

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

关键是对btoa()二进制数据的支持很差。

在这里：将二进制数据转换为 base-64 javaScript，您会发现建议arraybuffers用作 responseType，而不仅仅是文本。

此处：ArrayBuffer to base64 编码的字符串，您可以找到一个将arraybuffers 转换为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 );

}

Answer 2

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