Question

我试图为此搜索答案。这看起来非常简单，但是我对Javascript（一直用Java编码）的缺乏知识与Javascript端的图像流转换相结合使得这很难。

我制作了一个REST请求网址 - https://<<host>:port/getPicture，它会产生image/jpeg流媒体响应。

在Chrome浏览器中触发网址后，图片会正确呈现。它也在我的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

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

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

Answer 2

我遇到了同样的问题。尝试

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

类似这样的东西。

Answer 3

请参见以下内容：https://stackoverflow.com/a/60474472/10245760

这解决了我以��JFIF��开头的问题

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

3 个答案: