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

Question

我已经在各处寻找答案，但似乎很简单，但是由于我缺乏Javascript的知识（一直在编写Java代码），再加上在Javascript端进行图像流转换，使得这变得困难。

我创建了一个REST请求网址-https://<<host>:port/getPicture并且它会产生一个image/jpeg流式响应。

一旦我在Chrome浏览器中使用该URL，图像就会正确地呈现。 它也通过ng-src标签在我的angularJS应用程序中呈现，例如：<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/��'漛��

- Karthik Shivkumar

---

可能是重复的问题：如何在Javascript中将API调用的图像二进制转换为数据URI？ - user180100

使用overrideMimeType在IE 10上不起作用。有什么想法可以通过AngularJS的$http请求实现相同的功能吗？ - Karthik Shivkumar

@KarthikShivkumar：你找到任何解决方案了吗？我也遇到了同样的问题。 - gaurav bhavsar

嗨Gaurav..你有没有在这篇文章中检查答案 - https://dev59.com/pnLYa4cB1Zd3GeqPZpiL? - Karthik Shivkumar

嗨@KarthikShivkumar，你能检查一下这个问题吗？https://stackoverflow.com/questions/47161442/render-blob-image-with-angular-4 - Hanzo

Answer 1

1. 编码应该是base64，可以在服务器端或客户端完成。
2. 原始数据应设置如下 -

<img ng-src="data:image/*;base64,{{原始二进制数据}}"/>

- tusharmath

---

谢谢您的回复，Tushar。我认为我的问题更接近这个：https://dev59.com/pnLYa4cB1Zd3GeqPZpiL..一旦我得到答案，我会在这里发布以供参考。谢谢。 - Karthik Shivkumar

好的，答案确实就在上面链接中提到的：overrrideMimeType('text/plain; charset=x-user-defined')。不过，这只适用于XHR请求。我需要找到一种方法，在我使用Angular发出$http请求时也能覆盖标头。 - Karthik Shivkumar

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

类似于这样的东西。

- 家億陳