Display Encoded PNG

Question

I am using Autodesk View and Data API it's items API is returning thumbnail in some form which I am unable to understand how to display this. Following is the string returned from it.

�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��*Gǋ�����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`�

My queston is how to display this type of encoded string as PNG in html. The above output was received by writing the following code in javascript.

 function getThumbnails(urn) {
        var urnStr = urn;
        if (!urnStr || (0 === urnStr.length)) {
            alert("You must specify a URN!");
            return;
        }
        var urlStr = _baseURL + '/viewingservice/v1/thumbnails/' + urnStr;

        var jqxhr = $.ajax({
            url: urlStr + '?width=150&height=150',
            type: 'GET',
            headers: {
                "Authorization": "Bearer " + getAccessToken()
            },
            beforeSend: startSpinner("spn_viewTranslationStatus")
        })
            .done(function (ajax_data) {
                console.log(JSON.stringify(ajax_data, null, '   '));
                var download = document.createElement('a');
                //download.href = 'data:image/png;'+ajax_data+'';
                download.href = ajax_data + '';
                var r = /\\u([\d\w]{4})/gi;
                var x = ajax_data.replace(r, function (match, grp) {
                    return String.fromCharCode(parseInt(grp, 16)); } );
                x = unescape(x);
                console.log(x);
                download.href = 'data:image/png;'+x+'';
                download.download = 'reddot.png';
                download.click();
                $('body').append('<img src="data:image/png;base64,' + Base64.encode(x) + '"/>'),
                    stopSpinner();
            })
            .fail(function (jqXHR, textStatus) {
                //$("#txt_resViewTranslateStatus").html(ajaxErrorStr(jqXHR));
                stopSpinner();
            });
    }

Looks like a JavsScript string with unicode escape sequences for the non-ASCII bytes. You could probably use a base64 data URI. — Alexander O'Mara, May 01 '16 at 04:30
This is the resultant string @Alexander O'Mara . Any idea how to display it properly as **png** — Asim Khan, May 01 '16 at 05:21
Your question is ambiguous. Does "the string" that you get actually contain the characters `\\ `, `u`, `0`, `0` (and so on), or is it - as I suspect - just because you choose to view it as such from within JavaScript? It really looks like a plain PNG file, so have you tried saving it directly to disk and viewing it with relevant software? — Jongware, May 01 '16 at 08:46
yes I am using an API which returns thumbnails but it is returning something I cannot understand — Asim Khan, May 01 '16 at 11:49

score 2 · Accepted Answer · answered May 05 '16 at 10:34

Actually I was receiving a PNG from server and it was not displaying in javascript notation properly so I wrote a 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);

And it shows the file as PNG completely .

score 1 · Answer 2 · edited May 23 '17 at 11:44

You need to save the file on your server and serve it in your html page. If you are accessing the bubble information from the client javascript side, you should be decoding the string and assign it to an IMG tag like below. Basically, you encode the image as a base64 string if it is not yet encoded and set the string as the source of a IMG element:

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

(note this format is the same as the CSS format)

Since you image here is unicode encoded, you need to replace \u \b characters with their true representation. You can use this site (2nd converter) to do it, or use the technique explained here.

your answer was a little helpful but actually my file was not actually base64 or encoded yes it was a unicode string though — Asim Khan, May 05 '16 at 10:36

score 0 · Answer 3 · answered Nov 08 '19 at 03:50

Long story short this looks like someone read the image with readAsText() which mangles ("interprets") binary into utf8, instead of utf16. You need to get the server to return the data in arraybuffer or blob format ideally, or even base64, these preserve binary.

Long version with snippet. (those question marks symbols in the snippet show the lost information, compare it to the binary where they are not question marks in utf16): https://stackoverflow.com/a/56523118/2962797

Display Encoded PNG

3 Answers3