Convert Image Stream (JFIF - JPEG) format to DataURI using Javascript

Question

I have tried to search an answer for this all over. It seems pretty straightforward, but my lack of knowledge of Javascript (Been coding in Java all along) combined with Image stream conversion on Javascript side makes this hard.

I make a REST request url - https://<<host>:port/getPicture and it produces a image/jpeg streaming response.

Once I fire the URL in Chrome browser - the image is rendered correctly. It is also rendered in my angularJS app - via ng-src tag eg <img ng-src="url"/>

However, when I try to set the raw data to ng-src tag, it does not seem to work. On further reading I understood that ng-src does not accept raw image data, but needs to be converted to a base64String to be used as a DataURI. I tried to look up articles everywhere to convert raw image data (JFIF format) to DataURI and was unsuccessful.

Shown below is response raw data looks (I open it in a browser, it renders perfectly).

Questions - 1. What format is the raw data? Binary Stream or Byte Array? Or what is it? 2. How do I convert this in to a DataURI in Javascript so that it can be linked to my ng-src tag?

Request you to help me on this one. Seems so easy, but has taken me a week now and driving me nuts!!

����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/��'漛��

Answer 1

1. Encoding should be base64 you can do that on either on the server or the client.
2. The Raw data should be set as the following -

<img ng-src="data:image/*;base64,{{Raw Binary Data}}"/>

Answer 2

Please see this: https://stackoverflow.com/a/60474472/10245760

This solves my problem for response starting with JFIF

Answer 3

I got the same issue. try

    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);

something like this.