使用Angular 4渲染blob图像 [英] Render blob image with Angular 4

查看：105
本文介绍了使用Angular 4渲染blob图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试渲染来自soap服务器响应的用户图像，这不应该很难，但我不知道如何开始做。



这是请求方式的代码：

  this.http.post（wsurl，xml，{withCredentials：true，headers：headers} ）
 .toPromise（）
 .then（（response）=> ....

这是回复：

  ------ = _ Part_18_19650293.1510067330953 
 Content-键入：text / xml; charset = UTF-8 
 Content-Transfer-Encoding：binary 
 Content-Id：< 94A7DA36FAAE3F537AD3295BF2DFF5AD> 
 
<？xml version =1.0 encoding =UTF-8？>< soapenv：Envelope xmlns：soapenv =http://schemas.xmlsoap.org/soap/envelope/xmlns：xsd =http://www.w3.org / 2001 / XMLSchemaxmlns：xsi =http://www.w3.org/2001/XMLSchema-instance>< soapenv：Body> 
 
 .....的数据user 
< / soapenv：Body>< / soapenv：Env私奔> 
 ------ = _ Part_18_19650293.1510067330953 
内容类型：image / jpeg 
 Content-Transfer-Encoding：binary 
 Content-Id：< ACC047E73E810E9A61470902A1E4483F> 
 $ b $b    JFIFdd  C  C  dd  $ b $b  6！aR 1AQ ＃q 2 4CSb        ？9 @ P39 P39 @ @ P3sP3P3P3P3P3P3P3P3P3P3P3P3 PC = 5w $ b $bC  P x@ = j8 ^  N    ]X    4  3fql ] Ʈ  VG-5m + ^  ：w   S +   A   c 8    Yd 9` t  g8  & W  w $ b $bC  P  x @ = 5w  8@  S $ b $bNT   L&  5CY O d  ： ۋ{  z om A  I&      $        J Z湦  75 ？  ^ ＃kb H？ - ＃Zʆ     x  > D   jp    Z      ;  j （8  ）    &  WO$      ％ '    Z$ b $b  * & ꞟ O5 1  ％ D      ;  j （      r   g（ -  me）+& mK）   6T0Z = F @@A8ÍUPcCMl 9sJP39A888s\5qTps]NpXDZp       M8 ）VC 
;cO   ？     9@ 9@ 9@ 9AP x@ = 5w $ b $bC    3    ĩғ3|  F ！ ：  [_  * -Ѹ] P  0ʌB（   ߍ { 7 ͽ    ר{  j          jp   $ b $b3 h ]ӵ2 M ; $ b $bqh1  ！  S`   M i>   ϧ r 3！X =     S5  5 $ b $bkE Ѱ ѰS 
 N58 @  -A ~     |媆  {ISbsmFoS'zӴ&安培; Fos蛋白一@@ Ac` * 1] 2K؇X？{NH 2 * Y31hc.I2 KN （=;<！？W¯¯̓〜3XF؁\）䩫）q = A;ªSE9==ž  ，r   t_ i   no   9！ g（1 QSA5D ӧc ％  V  YW5uT u 4 .y             ？7ӸZ`○^ Y（08> ^ KB d  
 ------ = _ Part_18_19650293.1510067330953--

然后我将图像数据剪切为：

     JFIFdd  C  C  dd  
 6！aR1AQ＃q24CSb？9 @ P39 P39 @ @ P3sP3 P3 P3 P3 P3 P3 P3 P3 P3 P3 P3 P3 PC = 5w $ b $bC  P x@ = j8 ^  N   ] X43fql]ƮVG-5M + ^：WS + Ac8Yd9` t  g8  & W   b $ b $bC  P x@ = 5w  8@  S $ b $bNT   L&  5CY  O d  ：ۋۋ{  z om A  I&     $    裥  J Z湦湦75 ？  ^ ＃kb H？ - ＃Zʆ     x  > D   jp   Z      ;  j （ 8  ]    &  WO$      ％ '    Z
  *& ꞟ O5 1  ％ D   ;Ĵ（RG（-Me] +&安培; MK）6T0Z = F @@A8ÍUP cCMl9sJP39A888s\5qTps] NPX   DZ p       M8 ）VC 
;cO   ？     9@ 9@ 9@ 9AP x@ = 5w  $ b $bC   3    ĩғ3|  F ！ ：  [_  * -Ѹ] P  0ʌB（   ߍ { 7       ר{ j          jp   $ b $b3 h ]ӵ2 M ; $ b $bqh1  ！  S`  MI>ϧr3！ X =     S5  5 $ b $bkE Ѱ ѰS 
 N58 @  -A ~     |媆 ，    {   ISbsmFoS'zӴ和放大器; FOSA @@ Ac` *升] 2K؇X {nH的* Y31hc.I2 KN（=？; <！W¯¯̓〜3XF؁\）䩫）q = A;？ªSE9 == Z，rt_ino9！克（1QSA5Dӧc％VYW5uTu4 .y            7Ӹ   Z `    o  ？    ^Y （0   8  > ; ^k   b    d

EDIT1



这些方法是我用来将二进制转换为base64的方法

 让b64 = this._arrayBufferToBase64（结果）
 
这个.imgStr ='data：image / jpeg; base64，'+ b64 
 
 
 _arrayBufferToBase64（buffer）{
 let binary =''; 
 
 let bytes = new Uint8Array（this.str2ab（buffer））; 
 let len = bytes.byteLength; 
 console.log（lenbytes+ len）
 for（let i = 0; i< len; i ++）{
 binary + = String.fromCharCode（bytes [i]）; 
} 
 return window.btoa（binary）; 
} 
 
 str2ab（str）{
 var buf = new ArrayBuffer（str.length * 2）; //每个char 2个字节
 var bufView = new Uint16Array（buf）; 
 for（var i = 0，strLen = str.length; i< strLen; i ++）{
 bufView [i] = str.charCodeAt（i）; 
} 
返回buf; 
}

这些方法为图像生成一个src，如下所示：



'pre> 数据：图像/ JPEG; BASE64，/ F / 9 // 3 // // f8AABAASgBGAEkARgAAAAEAAgAAAAAAZAAAAGQAAAAAAP3 // f8AAEMAAAABAAEAAQABAAEAAQABAAEAAQABAAIAAQABAAEAAgACAAIAAQABAAIAAgACAAIAAgACAAIAAgACAAMAAgADAAMAAwADAAIAAwADAAQABAAEAAQABAADAAUABQAFAAUABQAFAAcABwAHAAcABwAIAAgACAAIAAgACAAIAAgACAAIAP3 // f8AAEMAAQABAAEAAQACAAIAAgAFAAMAAwAFAAcABQAEAAUABwAIAAgACAAIAAgACAAIAAgACAAIAAgACAAIAAgACAAIAAgACAAIAAgACAAIAAgACAAIAAgACAAIAAgACAAIAAgACAAIAAgACAAIAAgACAAIAAgACAAIAAgACAAIAAgACAAIAP3 f8AABEACAAAAGQAAABkAAMAAQARAAAAAgARAAEAAwARAAEA / F / 9 / wAAHQAAAAEAAAACAAMAAQABAAEAAQAAAAAAAAAAAAAAAAAAAAAAAAAEAAcABQAGAAgAAQADAAIACgD9 // 3 / AAA2ABAAAAABAAMAAgAFAAMAAgAEAAQABAAHAAAAAAAAAAAAAAABAAAAAgADAAQAEQAFABIAEwAhAGEABgBSAP3 / MQBBAAcAFABRAP3 / IgAjAHEA / f8VABYAMgD9 / zQAQwBTAGIA / F / 9 // 3 // F / 9 / wAAFAABAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD9 // 3 / AAAUABEAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP3 // f8AAAwAAwABAAAAAgARAAMAEQAAAD8A AAD9 // 3 // f8MAP3 / AwA5AEAA / f9QADMA / f8MAP3 / AwA5AEAA / f9QADMA / f8MAP3 / AwA5AEAA / f9QADMA / f8QAHMA / f9QADMA / f9QADMA / f9QADMA / f9QADMA / f9QADMA / f9QADMA / f9QADMA / f9QADMA / f9QADMA / f9QADMA / f9QADMA / f9QADMA / f9QAEMA / f89AP3 / EAA1AA8AdwD9 / w0AQwD9 // 3 / AwBQAP3 / eABAAP3 / PQD9 / xAAagA4AP3 / XgD9 // 3 / TgD9 // 3 // f8YAP3 / XQBYAP3 // F / 9 / XAA / f80AP3 / AAAcAP3 / MwBmABMAcQBsAP3 / XQAGAP3 / BwCuAf3 // f9WAEcALQA1AG0AKwBeAP3 / OgB3AP3 / CwD9 // 3 / fwBTAP3 / KwD9 // 3 // // f9BAP3 F / 9 / 2MA / f84AP3 // F / 9 // 3 / WQBkAP3 / OQBgAP3 / dAD9 // 3 / ZwA4AP3 / AQD9 / yYAVwD9 // 3 / CwAgADUGDwB3AP3 / DQBDAP3 // f8DAFAA / f94AEAA / f89AP3 / EAA1AA8AdwD9 / XAA / f84AEAA / F / 9 / wMAUwD9 / w0ATgAQAFQA / f8SAP3 // // f9MAA4AJgD9 3 / NQBDAFkA / f9PAP3 / ZAD9 // 3 / OgD9 / yIAywZ7AAcA / F / 9 /图30A / f9vAG0A / f9BAP3 // f9JACYA / F / 9 // 3 / HgAgAP3 // // f8kAP3 // f8cAP3 // f9Jif3 f9KAP3 / WgBmbv3 // f83AAQAFAAdADUA / F8 / ABEA / f8AAP3 / XgD9 / yMAGABrAGIA / f9IAD8ALQAjABoAWgCGAv3 // F / 9 // 3 // f94AAAA / F / 9 / Z4A / f9EABYA / F / 9 / wgAGgD9 / yAAagBwAP3 // F / 9 / wgAWgD9 // 3 // // f8GAP3 F / 9 / ZSA / F / 9 / 2oADgD9 / ygAOAD9 / XSA / f9dAP3 // F / 9 // 3 / JgD9 // 3 / VwBPACQA / F / 9 // 3 // F / 9 // 3 / JQD9 / YCA / F / 9 / / 3 / HwD9 / wwAWgACAAIADQD9 // 3 / KgAmAP3 / n6f9 / wkADABPADUA / f8xAP3 / HgD9 / YUA / f9EAP3 // F / 9 // 3 / FAAdAP3 // // f87AP3 f9qAA4A / f8oABoA / F / 9 // 3 / BgD9 // 3 // f8eAHIA / F / 9 // 3 / ZwAoABkA / f8OAC0A / F / 9 / 20ALQBlAF0AKwAmAG0ASwApAP3 // // f82AFQAMAD9 3 / AwAeAFoAHAD9 / z0A / F / 9 / xAARgBAAEAAQQD9 // 3 / OADNAH8AVQBQAP3 / YwASAEMA / f8HAP3 / TQB / AGWA / F / 9 // 3 / OQAPAHMASgAOAP3 // f9QADMA / f8MAP3 / AwA5AEEABwA4AP3 / AwA4AP3 / AwA4AP3 / BwD9 / 3MAXAD9 / zUA / F / 9 // 3 // F / 9 // 3 // f8QAHEA / f9UAA4A / F / 9 // 3 // // f9wAHMAXQBOAP3 F / 9 / 3AA / F / 9 / 1GA / F / 9 // EB / f9wAP3 // F / 9 // 3 // F / 9 // 3 / TQAIADgA / f8pAFYAQwD9 / w0AOwBjAAQAfwBPAP3 // f8dAP3 / PwD9 // 3 // F / 9 // 3 / OQBAAP3 / OQBAAP3 / OQBAAP3 / OQBBAA8AUAD9 / 3gAQAD9 / z0A / f8QADUADwB3AP3 / DQBDAP3 // f8FAB8A / f8zAAkA / F / 9 // 3 // // f8pASAAkwQRADMAfAD9 3 / BgBGAP3 / IQD9 / xsABwA6AP3 // f8AAFsAXwD9 // 3 / KgD9 / wQABAAdAC0AeARdAB4AFQD9 / 1AA / F / 9 / zAAjAJCACgA / F / 9 // 3 / zQf9 / 3sAAwD9 / ZCA / f99A / 3 // F / 9 // 3 / BgDoBXsA / f8gAGoAHgD9 / wgAGgD9 // 3 // // f8GAP3 F / 9 // 3 / FgD9 / wgAGgD9 / yAAagBwAP3 // F / 9 / w0AMwD9 / 2GA / f9dAPUEDgAyAP3 / TQADAP3 / OwALAP3 / DQBxAGgAMQD9 // 3 / IQD9 // 3 / UwBgAP3 // F / 9 / xAATQD9 / 2kAPgB / ABAA / F / 9 / + CD / f9yAP3 / MwAhACAAWAA9AP3 / EwD9 // 3 // F / 9 / wcAUwA1AP3 / / f81AP3 / DQBrAEUA / f9wBAAAIAD9 / 1MA / f8NAE4AEAA1ADgAQAD9 // 3 / BAAtAEEA / F9 + AP3 / GgD9 // 3 // F / 9 / 3wAhloIAP3 / LAD9 / XGA / F / 9 // 3 / ewD9 // 3 / DgBJAP3 / BgD9 // 3 // F / 9 / XEA / F / 9 // 3 / UwAXAGIAcwD9 / 20A / f9GAP3 // F / 9 // 3 / bwD9 // 3 / BQAFAFMA / F / 9 / xYAJwD9 // 3 / egD9 // 3 / 9AT9 / xoAJgD9 / 0YA / f8FAP3 / bwBzAP3 // F / 9 / 0EA / f9AAEAAQQBjAGAAfwAQACoA / F / 9 // 3 / bABdAP3 // F / 9 // 3 / MgD9 // 3 / awAAAAEABwZYAD8AewBuAEgAPwD9 / wsAHgD9 // 3 // f8qAP3 / WQAzADEAaABjAA8A / f8AAC4ASQAbABsA / F / 9 / XYA / F / 9 // 3 / MgBaBv3 / HAD9 // 3 / awD9 // 3 // f9uAAgAKAA9AP3 / HQD9 / 2jgOwD9 // 3 / BAA8AP3 / BgD9 // 3 / HQBXAP3 / IQD9 // 3 // f8TAxEAfgD9 / wIAMwAIAFgARgD9 // 3 / PwARAAEG / F / 9 // 3 / XAApAP3 // F / 9 // 3 // // f9rSv3 F / 9 / YKA / F / 9 / 3EA / F / 9 / WAA / f89AP3 / QQAdAAEAAQABAAEAAQABAAQA / f87ABMA / F + qABsAUwBFADkA / F / 9 // 3 // F / 9 // 3 / PQD9 / z0A / f8LAP3 // f96AP3 / LAByAP3 // F / 9 / xUAdABfAP3 / aQD9 // 3 / AAD9 / 24AbwD9 // 3 // f85ACEA / f9nACgAMQD9 / xUAUQBTAEEANQBEAP3 / 5wRjAP3 / JQD9 // 3 / VgACAP3 // f8FAAEAWQBXADUAdQBUAP3 / dQAOAP3 /的nad9 / y4AeQD9 // 3 // // f8FAP3 F / 9 / YAA / F / 9 // 3 // F / 9 // 3 // F / 9 // 3 // f83APgE / F / 9 // 3 / WgD9 / 2AA / f8iAP3 // F / 9 / 28A / F / 9 / wEAPwD9 // 3 // F / 9 / 14AWQD9 / ygAMAD9 // 3 / FWD9 / ZGA / F / 9 / z4AXgBrAP3 / fwD9 // 3 / FABiAAIAAgACAAIAAgACAAIAAgACAAIADgD9 // 3 // f / 9 / 2QAHwD9 // 3 / DQA =

但是图片没有在屏幕上呈现



我可能做错了什么？



谢谢

解决方案

我不是图像转换专家，但如果是二进制编码图像，请试试这个：

 让img = document.createElement（'img'）; 
 img.src ='data：image / jpeg; base64，'+ btoa（'你的二进制数据'）; 
 //图片现在包含你的图片

但我不确定这是正确的数据...无论如何，试试这个，让我知道结果


I'm trying to render an user image that comes from soap server response, it not should be difficult but i dont know how start to do.

This is the code of the request way:

this.http.post(wsurl, xml, {withCredentials: true, headers: headers})
        .toPromise()
        .then((response) =>....

This is the response:

     ------=_Part_18_19650293.1510067330953
        Content-Type: text/xml; charset=UTF-8
        Content-Transfer-Encoding: binary
        Content-Id: <94A7DA36FAAE3F537AD3295BF2DFF5AD>

        <?xml version="1.0" encoding="UTF-8"?><soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"><soapenv:Body>

        ..... data of the user
    </soapenv:Body></soapenv:Envelope>
        ------=_Part_18_19650293.1510067330953
        Content-Type: image/jpeg
        Content-Transfer-Encoding: binary
        Content-Id: <ACC047E73E810E9A61470902A1E4483F>

       ����JFIFdd��C��C��dd��
��6!aR�1AQ�"#q�2�4CSb���������?����9@�P3��9@�P3��9@�P3�s�P3�P3�P3�P3�P3�P3�P3�P3�P3�P3�P3�P3�PC�=�5w�
C��P�x@�=�j8�^��N����]X����4��3fql�]�Ʈ��VG-5m+^�:w���S�+���A���c�8����Yd�9`�t��g8��&W�� صw�
C��P�x@�=�5w��8@��S�
NT���L&��5CY�O�d��:�"ۋ{��z�om�A��I&��� ��$����襉��J�Z湦��75�?��^�#kb�H?-#Zʆ�����x��>�D��� jp���Z������;��j�(8��]����&��WO$������%�'����Z
��*&�ꞟ� O5�1��%�D������;��j�(������r���g(�-��m-e]+&mK)��6T0��Z�=��F@@A��8ÍUP�cC��Ml���9sJ��P3��9A8�8�8��s\�5�������q�T����ps]N���p��X��DZ�p�������M8�)VC�
;cO���?�����9@�9@�9@�9AP�x@�=�5w�
C���3   ����ĩ ғ3|��F�!�:��[_��*�-Ѹ]�P��0ʌB(���ߍ�{�7�ͽ����ר{� j���������� jp���
3�h�]ӵ2�M�;�
qh1��!��S`���M�i>��ϧ�r�3! X=�����S5��5�
kE�Ѱ �S�
N58@��-A�~�����|媆�,����{��I��������Sbs�m�F����o��S��'��z��Ӵ�&�F��os���A�@@Ac`*���l]����2��k؇X?{nH?����*�Y31hc�.I�����2ٚ���k���n(=��;��<���W�!���̓~�3XF��?؁���\)�����䩫���)��q���=�A�;�ªSE9������=�=���z�,r���t_�i���no���9!�g(1�QSA5D�ӧc�%��V��YW5uT�u�4�.y������ ����������7Ӹ���Z�`�"���o��?����^Y�(0���8��>^k���b����d��
------=_Part_18_19650293.1510067330953--

Then I cut the image data to :

����JFIFdd��C��C��dd��
��6!aR�1AQ�"#q�2�4CSb���������?����9@�P3��9@�P3��9@�P3�s�P3�P3�P3�P3�P3�P3�P3�P3�P3�P3�P3�P3�PC�=�5w�
C��P�x@�=�j8�^��N����]X����4��3fql�]�Ʈ��VG-5m+^�:w���S�+���A���c�8����Yd�9`�t��g8��&W�� صw�
C��P�x@�=�5w��8@��S�
NT���L&��5CY�O�d��:�"ۋ{��z�om�A��I&��� ��$����襉��J�Z湦��75�?��^�#kb�H?-#Zʆ�����x��>�D��� jp���Z������;��j�(8��]����&��WO$������%�'����Z
��*&�ꞟ� O5�1��%�D������;��j�(������r���g(�-��m-e]+&mK)��6T0��Z�=��F@@A��8ÍUP�cC��Ml���9sJ��P3��9A8�8�8��s\�5�������q�T����ps]N���p��X��DZ�p�������M8�)VC�
;cO���?�����9@�9@�9@�9AP�x@�=�5w�
C���3   ����ĩ ғ3|��F�!�:��[_��*�-Ѹ]�P��0ʌB(���ߍ�{�7�ͽ����ר{� j���������� jp���
3�h�]ӵ2�M�;�
qh1��!��S`���M�i>��ϧ�r�3! X=�����S5��5�
kE�Ѱ �S�
N58@��-A�~�����|媆�,����{��I��������Sbs�m�F����o��S��'��z��Ӵ�&�F��os���A�@@Ac`*���l]����2��k؇X?{nH?����*�Y31hc�.I�����2ٚ���k���n(=��;��<���W�!���̓~�3XF��?؁���\)�����䩫���)��q���=�A�;�ªSE9������=�=���z�,r���t_�i���no���9!�g(1�QSA5D�ӧc�%��V��YW5uT�u�4�.y������ ����������7Ӹ���Z�`�"���o��?����^Y�(0���8��>^k���b����d��

EDIT1

These methods are the methods that I have used to convert binary to base64

let b64 = this._arrayBufferToBase64(result)

this.imgStr = 'data:image/jpeg;base64,' + b64


_arrayBufferToBase64( buffer ) {
    let binary = '';

    let bytes = new Uint8Array( this.str2ab(buffer) );
    let len = bytes.byteLength;
    console.log("lenbytes " + len)
    for (let i = 0; i < len; i++) {
      binary += String.fromCharCode( bytes[ i ] );
    }
    return window.btoa( binary );
  }

  str2ab(str) {
    var buf = new ArrayBuffer(str.length*2); // 2 bytes for each char
    var bufView = new Uint16Array(buf);
    for (var i=0, strLen=str.length; i<strLen; i++) {
      bufView[i] = str.charCodeAt(i);
    }
    return buf;
  }

The methods generate a src to the image like this:

data:image/jpeg;base64,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

But the image not renders on screen

What can I'm doing wrong?

Thanks

解决方案

I'm not an image converting expert, but if it's a binary encoded image, try this : 

let img = document.createElement('img');
img.src = 'data:image/jpeg;base64,' + btoa('your binary data here');
// image now contains your picture

But I'm not sure this is correct data ... Anyways, try this, and let me know the result

这篇关于使用Angular 4渲染blob图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆