Показать кодированный PNG

Я использую Autodesk View и Data API, его элементы API возвращают миниатюру в некоторой форме, которую я не могу понять, как это отобразить. Ниже приводится строка, возвращаемая из него.

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

Мой вопрос заключается в том, как отобразить этот тип кодированной строки в формате PNG в формате HTML. Вышеуказанный вывод был получен путем написания следующего кода в 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();
            });
    }
Источник

2 ответа

Решение

На самом деле я получал PNG с сервера, и он не отображался в нотации JavaScript должным образом, поэтому я написал локон в 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);

И это показывает файл как PNG полностью.

Источник

Вам необходимо сохранить файл на своем сервере и разместить его на своей html-странице. Если вы получаете доступ к информации о пузырях со стороны клиентского JavaScript, вы должны декодировать строку и назначить ее тегу IMG, как показано ниже. По сути, вы кодируете изображение как строку base64, если оно еще не закодировано, и задаете строку в качестве источника элемента IMG:

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

(обратите внимание, что этот формат совпадает с форматом CSS)

Поскольку изображение здесь кодируется в Юникоде, вам необходимо заменить символы \u \b на их истинное представление. Вы можете использовать этот сайт (2-й конвертер), чтобы сделать это, или использовать метод, описанный здесь.

Источник

Короче говоря, похоже, что кто-то прочитал изображение с помощью readAsText(), которая преобразовывает ("интерпретирует") двоичный файл в utf8 вместо utf16. Вам нужно заставить сервер возвращать данные в формате arraybuffer или blob, в идеале, или даже в base64, они сохраняют двоичный файл.

Длинная версия с сниппетом. (эти символы вопросительных знаков во фрагменте показывают потерянную информацию, сравните ее с двоичным кодом, где они не являются вопросительными знаками в utf16): /questions/50144632/pravilnyij-sposob-chteniya-fajla-s-pomoschyu-filereader-dlya-sozdaniya-stroki-he/50144642#50144642

Источник
Другие вопросы по тегам