javascript - 使用 Javascript 将图像流 (JFIF - JPEG) 格式转换为 DataURI

Question

我试图从头到尾寻找答案。这看起来很简单，但我缺乏 Javascript 知识(一直用 Java 编码)，再加上 Javascript 端的图像流转换，这让这很难。

我创建了一个 REST 请求 url - https://<<host>:port/getPicture，它会生成一个 image/jpeg 流式响应。

一旦我在 Chrome 浏览器中触发 URL - 图像就会正确呈现。它也呈现在我的 angularJS 应用程序中——通过 ng-src 标签，例如ojit_代码

但是，当我尝试将原始数据设置为 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/��'漛��

Answer 1

1. 编码应为 base64，您可以在服务器或客户端上执行此操作。
2. 原始数据应设置如下 -


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