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

Question

我试图为这一切寻找答案。这看起来很简单，但我缺乏 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/??'???

Answer 1

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

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