6

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 e.g. <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/��'漛��
chrylis -cautiouslyoptimistic-
  • 75,269
  • 21
  • 115
  • 152
Karthik Shivkumar
  • 121
  • 1
  • 2
  • 14
  • 1
    possible duplicate of [How can I convert image binary from API call to data URI in Javascript?](http://stackoverflow.com/questions/8394721/how-can-i-convert-image-binary-from-api-call-to-data-uri-in-javascript) –  Aug 24 '13 at 07:46
  • Using overrideMimeType doesn't work for IE 10.. Any ideas how to do the same via $http request via AngularJS? – Karthik Shivkumar Aug 29 '13 at 14:40
  • @KarthikShivkumar : Did you find any solution? I am also facing same problem. – gaurav bhavsar Dec 07 '15 at 11:46
  • Hi Gaurav.. Did u check the answer in the post - http://stackoverflow.com/questions/16775729/angular-js-request-in-order-to-get-an-image? – Karthik Shivkumar Dec 24 '15 at 07:37
  • Hi @KarthikShivkumar, could you check this question? https://stackoverflow.com/questions/47161442/render-blob-image-with-angular-4 – Hanzo Nov 08 '17 at 09:26

2 Answers2

4
  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}}"/>

tusharmath
  • 10,622
  • 12
  • 56
  • 83
  • Thanks for your response Tushar.. I think my question was more on the lines of this one.. http://stackoverflow.com/questions/16775729/angular-js-request-in-order-to-get-an-image.. Once I do get my answer will post it here for further reference.. thanks – Karthik Shivkumar Aug 25 '13 at 07:32
  • Ok.. the answer is indeed what is present in the above link.. overrrideMimeType('text\/plain; charset=x-user-defined').. However, this works only for XHR request.. Need to find a way to override the header when I fire a $http request in angular – Karthik Shivkumar Aug 26 '13 at 13:44
0

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.

家億陳
  • 1
  • 1