f89AP3

f89AP3

关注
发信
关注(28)粉丝(399)

使用Angular 4渲染blob图像

本文介绍了使用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:

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图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！
                        
1403页，肝出来的..
09-06 11:52
Powered by LMLPHP ©2024 f89AP3 0.042235