2

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

1
  • Did you solve your issue ? Commented Feb 2, 2018 at 11:30

3 Answers 3

1

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

Sign up to request clarification or add additional context in comments.

4 Comments

That's why I said I'm not sure this is correct data ... Usually I don't see this kind of text, but it says "binary encoding", and that's how I managed them. Sorry I can't be anymore useful, that's all I can give you :/
This is the response after do response.text(). I dont know if this is a problem to text() method
And is it what you have in your database ?
In the data base the images are stored in blob type
1

For dealing with blobs coming from a server try the following

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

Comments

0

If you have blob value, you can directly set the value in image tag in html..

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

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

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.