我试图渲染来自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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
但图像不会在屏幕上呈现
我可以做错什么?
由于
答案 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>