来自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(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var http = new XMLHttpRequest();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; http.open("GET", "/newcaptcha",true);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; http.responseType = 'arraybuffer';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; http.send();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; http.onload = () => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(http.response);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var b64Response = _arrayBufferToBase64(http.response);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("capimg").src =&nbsp; 'data:image/png;base64,'+b64Response;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }function _arrayBufferToBase64( buffer ) {&nbsp; &nbsp; var binary = '';&nbsp; &nbsp; var bytes = new Uint8Array( buffer );&nbsp; &nbsp; var len = bytes.byteLength;&nbsp; &nbsp; for (var i = 0; i < len; i++) {&nbsp; &nbsp; &nbsp; &nbsp; binary += String.fromCharCode( bytes[ i ] );&nbsp; &nbsp; }&nbsp; &nbsp; return window.btoa( binary );}

Answer 2

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