在HTML顯示原始JPEG/JS

我收到的形象是這種格式：在HTML顯示原始JPEG/JS

����JFIF``��C  

$.' ",#(7),01444'9=82<.342��C   

2!!22222222222222222222222222222222222222222222222222���|"��  
���}!1AQa"q2���#B��R��$3br� 
%&'()*456789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz���������������������������������������������������������������������������  
���w!1AQaq"2�B���� #3R�br� 
$4�%�&'()*56789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz��������������������������������������������������������������������������?�4���)����4�㊎D,>W�}jLsIބ�Y~{鑻a��6�ҙb�'��I�Fj�+��K�R 
�dhr=���4�������+R~S���Zq�>�g �5Vղ_��[�y��(,�����Ґ2�[email protected](��K��I�|Ro��G#қ��K�Ґ��pM7|7w��I���[email protected]��)��J��jIeo��?�篵Z�����9��8�a����[W%�r��F2E4Es�e��/������]��i�92�Pf���݃yo��O��n���9f�]�;W�=zRt��綃ނ*}Z{ׂ�P!�̤�YEt�s�!���s���zR�EQdP�]\��b�@̫����Q������d��k��t�&�Nk�L��@f�&�>Ê�u�����������`���-�s�/ ���ʪF�p)�f�c�(aLd?p�I�I��7Rr=h��i����2=�2�4���P��'�3擨*����%ߖ�*]��`Q�ڌ�&G�+��5䈹E��Mu2F����E���jϔp�����_�qp����^�V������^�ː���̬b�'l�E/��'漛��

雖然通常鉻檢測圖像，並顯示在開發面板預覽，它不管理。響應頭是這裏面應該的瀏覽器，這是一個形象：

Access-Control-Allow-Credentials:true 
Access-Control-Allow-Origin:http://localhost:3333 
Cache-Control:private 
Content-Length:2621 
Content-Type:image/jpeg 
Date:Wed, 05 Oct 2016 12:43:00 GMT 
Server:Microsoft-IIS/8.5 
X-AspNet-Version:4.0.30319 
X-Powered-By:ASP.NET

這裏是打字稿我的照片的請求方法：

private photoHttpRequest(userId: string): Promise<string> { 
     const photoRequest: XMLHttpRequest = new XMLHttpRequest(); 
     const url: string = "some url" + userId; 
     photoRequest.open("GET", url, true); 

     return new Promise((resolve, reject) => { 
      photoRequest.onreadystatechange =() => { 
       if (photoRequest.readyState === 4) { 
        if (photoRequest.status === 200) { 
         resolve(photoRequest.responseText); 
        } else { 
         reject(photoRequest.responseText); 
        } 
       } 
      }; 

      photoRequest.send(""); 
     }); 
    } 
}

並在此之後，我只是轉換爲base64：

let photo: string = await this.photoHttpRequest("1234"); 
photo = "data:image/*;base64,"+window.btoa(encodeURIComponent(photo));

並將其傳遞給img.src但這不起作用。

我在做什麼錯了？

來源

2016-10-05 Alex

爲什麼你使用'encodeURIComponent'？ – Maxx

設置響應是一個blob

你有兩種方法

集XHR的responseType爲「斑點」
使用取fetch(url).then(res => res.blob()).then(blob => console.log(blob))

然後使用img.src = URL.createObjectURL(blob)和做什麼你想要它

最好的是，如果你並不需要AJAX，因爲在所有它看起來像你正在做一個簡單的GET請求

來源

2016-10-05 15:06:29 Endless

感謝您的幫助！你的建議有幫助。你知道我爲什麼這樣做沒有用嗎？我不清楚。 – Alex

Javascript不會像字符串那樣處理二進制文件，你可以得到「超出範圍」的錯誤...所以瀏覽器試圖對它做出明智的決定，並且dos解析它並對它進行一些修改https：//developer.mozilla。組織/ EN-US /文檔/網絡/ API /的XMLHttpRequest/Sending_and_Receiving_Binary_Data＃Receiving_binary_data_in_older_browsers – Endless

在HTML顯示原始JPEG/JS

回答

相關問題