[英]Convert Image Stream (JFIF - JPEG) format to DataURI using Javascript
我試圖為這一切尋找答案。 這看起來很簡單,但我缺乏 Javascript 知識(一直用 Java 編碼)結合 Javascript 端的圖像流轉換使這很難。
我發出一個 REST 請求 url - https://<<host>:port/getPicture
並生成一個image/jpeg
流響應。
一旦我在 Chrome 瀏覽器中觸發 URL - 圖像就會正確呈現。 它也在我的 angularJS 應用程序中呈現 - 通過 ng-src 標簽,例如<img ng-src="url"/>
但是,當我嘗試將原始數據設置為 ng-src 標簽時,它似乎不起作用。 在進一步閱讀時,我了解到 ng-src 不接受原始圖像數據,但需要轉換為 base64String 以用作 DataURI。 我試圖到處查找文章將原始圖像數據(JFIF格式)轉換為DataURI,但沒有成功。
下面顯示的是響應原始數據的外觀(我在瀏覽器中打開它,它呈現完美)。
問題 - 1. 原始數據是什么格式? 二進制流還是字節數組? 或者是什么? 2. 如何在 Javascript 中將其轉換為 DataURI 以便它可以鏈接到我的 ng-src 標簽?
請你幫我解決這個問題。 看起來很簡單,但現在花了我一個星期,讓我發瘋!!
����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�$?Z@(��K��I�|Ro��G#қ��K�Ґ��pM7|7w��I���Q@��)��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/��'漛��
<img ng-src="data:image/*;base64,{{Raw Binary Data}}"/>
請看這個: https : //stackoverflow.com/a/60474472/10245760
這解決了我從 JFIF 開始的響應問題
我遇到了同樣的問題。 嘗試
xhr.open("GET", path, true);
xhr.setRequestHeader("Content-Type", "image/jpeg");
xhr.responseType = "arraybuffer";
xhr.addEventListener("readystatechange", function() {
if (this.readyState === 4) {
var resp = this.response;
var byteArray = new Uint8Array(resp);
var str = String.fromCharCode.apply(null, byteArray);
var src = "data:image/jpeg;base64," + btoa(str);
var img = document.createElement("img");
img.src = src;
});
xhr.send(null);
像這樣的東西。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.