Display Encoded PNG

Question

Ich benutze Autodesk View und Daten API es ist Artikel API gibt Thumbnail in irgendeiner Form, die ich nicht verstehen, wie dies angezeigt wird. Im Folgenden wird die Zeichenfolge zurückgegeben.

�PNG\r\n\u001a\n\u0000\u0000\u0000\rIHDR\u0000\u0000\u0000�\u0000\u0000\u0000�\b\u0002\u0000\u0000\u0000\":9�\u0000\u0000\u0000\u0003sBIT\b\b\b��O�\u0000\u0000\u0003UIDATx����nSW\u0014@��ش���H(��>\u0010\u0001RE�vw3�3Z,��O\u0012��\u001c�m\u001b��˳\u0017��IX$�EBX$�EBX$�EBX$�EBX$�EBX$�EBX$�EBX$�EBX$�EBX$�EBX$�EBX$�EBX$�E�t�&so�9�\u001d�*3��\u000b�:3��������u���̌Ʈ��G!\ta�\u0010\u0016\ta�\u0010\u0016\ta�\u0010\u0016\ta�\u0010\u0016\ta�\u0010\u0016\ta�\u0010\u0016\ta�\u0010\u0016\ta�\u0010\u0016\ta�8m�\u0014�ޯ��;3\u001a�Ъ�6��!9I=�Q�UfFcWYՙw*�\"!,\u0012�\"!,\u0012�\"!,\u0012�\"!,\u0012�\"!,\u0012�\"!,\u0012�\"!,\u0012�\"!,\u0012�\"!,\u0012.S�?3\u001a�Ъ.ST3�����2\u0005\u0015a�\u0010\u0016\ta�\u0010\u0016\ta�\u0010\u0016\ta�\u0010\u0016\ta�\u0010\u0016\ta�\u0010\u0016\ta�\u0010\u0016\ta�\u0010\u0016\ta�p�}���؅Vu潚\u0019�]eUgީ\b���H\b���H\b���H\b���H\b���H\b���H\b���H\b�A^/�m�^⁄�\b�_�v�/��ݟ�ʣ\b+�z��*GNj�����v��p���y�]����Ǟ�s���e���j�L�f��\u0004��������N���l��m��mf����O�\u001f���v�*��q\u000e�p�'\u0012��������|��w��!��ݿ�ɟ}Z���\u0013-�2+�������o�\f�ې�=�����0��ҳ\bk&����n���玲ȣ���H\b���H\b���H\b���H\b���H\b���H\b��3��ό�.��3���h�*��\u0005\u0002T�EBX$�EBX$�EBX$�EBX$�EBX$�EBX$�EBX$�EBX$�EBX$\\��f4v�U]��fFcWY�e\n*�\"!,\u0012�\"!,\u0012�\"!,\u0012�\"!,\u0012�\"!,\u0012�\"!,\u0012�\"!,\u0012�\"!,\u0012�\"qx�l���}�{G���h�B���aے���<\nI\b���H\b���H\b���H\b���H\b���H\b���H\b���H\b���H\b���H\b���H\b���H\b���H\b���H�\u0005�\u000e�e�-S\u0002\u0000\u0000\u0000\u0000IEND�B`� 

Mein queston ist, wie als PNG in html diese Art von codierten Zeichenfolge anzuzeigen. Die obige Ausgabe wurde erhalten, indem der folgende Code in Javascript geschrieben wurde.

Answer 1

Eigentlich war ich ein PNG vom Server empfangen und es wurde die Anzeige nicht in Javascript-Notation richtig so schrieb ich eine curl in PHP

$ch = curl_init(); 

// set URL and other appropriate options 
curl_setopt($ch, CURLOPT_URL, "https://developer.api.autodesk.com/viewingservice/v1/thumbnails/urn"); 
curl_setopt($ch, CURLOPT_HTTPHEADER, array(
    'Authorization:Bearer x8KaVvMxZTxliTjYPiBTmpL0JaIC')); 

curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); 
// grab URL and pass it to the browser 
$out = curl_exec($ch); 
$information = curl_getinfo($ch); 
//var_dump($information); 

// close cURL resource, and free up system resources 
curl_close($ch); 

echo $out; 
$fp = fopen('myfile.png', 'w'); 
fwrite($fp, $out); 
fclose($fp); 

Und es zeigt die Datei als PNG vollständig.

Answer 2

Sie müssen die Datei auf Ihrem Server speichern und in Ihrer HTML-Seite bereitstellen. Wenn Sie von der Javaseite des Clients aus auf die Blaseninformationen zugreifen, sollten Sie die Zeichenfolge decodieren und sie einem IMG-Tag wie unten zuweisen. Grundsätzlich kodieren Sie das Bild als base64 String, wenn es noch nicht codiert wird, und stellen Sie die Zeichenfolge als Quelle eines IMG-Element:

var imgData ='data:image/png;base64,' + 'my base64 encoded string' ; 
$("#myImg").src =imgData ; 

(beachten Sie, dieses Format ist das gleiche wie das CSS-Format)

Da Ihr Bild hier Unicode-codiert ist, müssen Sie \ u \ b Zeichen durch ihre wahre Darstellung ersetzen. Sie können this site (2. Konverter) verwenden, oder verwenden Sie die erläuterte Technik here.