表示エンコードされたPNG

Question

私はを使用しています。Autodesk View and 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`� 

私questonはHTMLでPNGとしてエンコードされた文字列のこのタイプを表示する方法です。 上記の出力は、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(); 
      }); 
    } 

Answer 1

実は私は、サーバーからPNGを受けていたし、それは私は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などのファイルを示し、適切javascriptの表記で表示されませんでした。

Answer 2

ファイルをサーバーに保存し、htmlページで提供する必要があります。クライアントのJavaScript側からバブル情報にアクセスする場合は、文字列をデコードして、それを以下のようなIMGタグに割り当てる必要があります。基本的に、あなたはそれがまだエンコードされていない場合にbase64文字列として画像を符号化し、IMG要素の供給源として文字列を設定：

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

（このフォーマットは、CSSフォーマットと同じであることに注意）

ここにイメージするのはユニコードでエンコードされているので、\ u \ b文字をその真の表現に置き換える必要があります。 this site（2番目のコンバータ）を使用して、またはhereで説明されている方法を使用できます。