首頁猿問來自restapi的圖像/png響...

來自restapi的圖像/png響應未顯示在瀏覽器中

JavaScript

呼喚遠方 2021-08-26 20:20:41

我在顯示來自 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); } }

查看完整描述

2 回答

侃侃無極

TA貢獻2051條經驗獲得超10個贊

正如我在評論中指出的那樣，您可能不需要 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 );

}

反對回復 2021-08-26

慕哥6287543

TA貢獻1831條經驗獲得超10個贊

如果我在瀏覽器中打開它，附加的 base 64 響應似乎并未實際加載圖像。其次，我可以看到可能導致此問題的一個問題是 DOM 元素 img 的重新加載，如果它沒有由任何框架處理，您可能需要手動干預。要檢查這一點，您可以使用本地圖像進行測試并加載它。如果它不起作用，那么你就有了根本原因。如果是這樣，那么這個 base64 響應就是一個問題。此外，檢查控制臺是否有任何錯誤并在此處進行更新。

反對回復 2021-08-26

2 回答
0 關注
242 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

來自restapi的圖像/png響應未顯示在瀏覽器中

來自restapi的圖像/png響應未顯示在瀏覽器中

2 回答

添加回答