使用Angular 4渲染blob图像

时间:2017-11-07 15:21:18

标签: html image angular binary-data

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

这是请求方式的代码:

this.http.post(wsurl, xml, {withCredentials: true, headers: headers})
        .toPromise()
        .then((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--

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

����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

这些方法是我用来将二进制转换为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;
  }

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

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

但图像不会在屏幕上呈现

我可以做错什么?

由于

3 个答案:

答案 0 :(得分:1)

我不是图像转换专家,但如果它是二进制编码图像,请尝试以下操作:

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

但我不确定这是正确的数据......不管怎样,试试这个,让我知道结果

答案 1 :(得分:0)

如果具有blob值,则可以直接在html的图片标签中设置该值。

代替this.imgStr ='data:image / jpeg; base64,'+ b64; 使用this.imgStr = b64;

<img src="data:image/png;base64,{{imgStr}}" />

答案 2 :(得分:0)

要处理来自服务器的Blob,请尝试以下操作

// Get the blob via an angular service - with response type "blob" as "json"
getBlob() {
    return this.http_.get(`${this.url}/getBlob`, {responseType:"blob" as "json"});
  }

//In your component
imageUrl: string;
getBlobUrl(){
    this.blobService.getBlob().subscribe((data: Blob) => {
      this.createImageFromBlob(data);
    })
  }

  createImageFromBlob(image: Blob) {
    let reader = new FileReader();
    reader.addEventListener("load", () => {
      this.imageUrl= reader.result;
    }, false);
  if (image) {
      reader.readAsDataURL(image);
    }
  }

<!--HTML-->
<div>
 <img [src]="imageUrl">
</div>