Base64でエンコード画像やJS

Question

でそれをレンダリング

私はこれが

77+9UE5HDRoNAAAADUlIRFIAAAHvv70AAAHvv70IAwAAAO+/vWHvv73vv70AAAHvv71QTFRFRUhNSExRSU1SS09UTFBVTVFWTlJXT1RZUFVaVlpgV1xiWF1jXGFnYWZtZGlwZmxza3F4bHJ5bnR7NO+/vVN977+977+9Qu+/ve+/vUTvv73vv71I77+977+9TO+/ve+/vU3vv73vv71O77+977+9UO+/ve+/vVTvv73vv71V77+977+9Vu+/ve+/vVzvv73vv71d77+977+9ZO+/ve+/vWbvv73vv71s77+977+9cO+/ve+/vXTvv73vv71077+977+9fe+/ve+/ve+/vUQ477+9RTrvv71LP++/vUM177+9Rjnvv71JOu+/vUpA77+9T0Lvv71PRu+/vVBD77+9U0fvv71WSe+/vVhO77+9eXjvv73vv70F77+977+9JO+/ve+/vSfvv73vv71R77+977+9Se+/ve+/vWXvv73vv71p77+977+977+977+977+977+977+977+977+977+977+977+977+977+977+977+977+977+977+977+977+977+977+977+977+977+977+977+977+977+977+977+977+977+977+977+977+977+977+977+977+9xLDvv73Gsu+/vciKyq3vv73OvO+/ve+/ve+/ve+/ve+/vc2477+9zrnvv73Qou+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/vd2l77+936fvv73hjo/ilZrvv73vv73vv73go6jet++/ve+/vdOD77+91Ibvv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv70LMO+/vQAAAAFiS0dE77+9Lu+/vUovAAAI77+9SURBVHjvv73vv73YjXMUZx3vv73vv70lFAgl77+9VFlCBe+/vWBq77+9J++/ve+/vXAtaSlpIwgeWu+/ve+/vRTvv71EXlLvv71A77+977+9WO+/vQBSRO+/vWhKQSjvv73vv73vv73vv73vv70+e++/ve+/ve+/vSnvv71pYe+/vTvvv73vv70d77+977+977+9Pe+/ve+/ve+/vWd277+977+9S++/ve+/vSop77+9C9i9CQJLEFjvv73vv70SBO+/vSDvv70E77+9JQgsQWAJAksQWO+/ve+/vRIE77+9IO+/vQTvv70lCCxBYAkCSxBY77+977+9EgTvv70g77+9BO+/vSUILEFgCQJLEFjvv73vv70SBO+/vSDvv70E77+9JQgsQWAJAksQWO+/ve+/vRIE77+9IO+/vQTvv70lCCxBYAkCSxBY77+977+9EgTvv70g77+9BO+/vSUILEFgCQJLEFjvv73vv70SBO+/vSDvv70E77+9JQgsQWAJAksQWO+/ve+/vRIE77+9IO+/vQTvv70lCCxBYAkCSxBY77+977+9EgTvv70g77+9BO+/vSUILEFgCQJLEFjvv73vv70SBO+/vSDvv70E77+9JQgsQWAJAksQWO+/ve+/vRIE77+9IO+/vQTvv70lCCxBYAkCSxBY77+977+9EgTvv70g77+9BO+/vSUILEFgCQJLEFjvv73vv70SBO+/vSDvv70E77+9JQgsQWAJAksQWO+/ve+/vRIE77+9IO+/vQTvv70lCCxBYAkCSxBY77+977+9EgTvv70g77+9BO+/vSUILEFgCQJLEFjvv73vv70SBO+/vSDvv70E77+9JQgsQWAJAksQWO+/ve+/vRIE77+9IO+/vQTvv70lCCxBYAkCSxBY77+977+9EgTvv70g77+9BO+/vSUILEFgCQJLEFjvv73vv70SBO+/vSDvv70E77+9JQgsQWAJAksQWO+/ve+/vRIE77+9IO+/vQTvv70lCCxBYAkCSxBY77+977+9EgTvv70g77+9BO+/vSUILEFgCQJLEFjvv73vv70SBO+/vSDvv70E77+9JQgsQWAJAksQWO+/ve+/vRIE77+9IO+/vQTvv70lCCxBYAkCSxBY77+977+9EgTvv70g77+9BO+/vSUILEFgCQJLEFjvv73vv70SBO+/vSDvv70E77+9JQgsQWAJAksQWO+/ve+/vRIE77+9IO+/vQTvv70lCCxBYAkCSxBY77+977+9EgTvv70g77+9BO+/vSUILEFgCQJLEFjvv73vv70SBO+/vSDvv70E77+9JQgsQWAJAksQWO+/ve+/vRIE77+9IO+/vQTvv70lCCxBYAkCSxBY77+977+9EgTvv70g77+9BO+/vSUILEFgCQJLEFjvv73vv70SBO+/vSDvv70E77+9JQgsQWAJAksQWO+/ve+/vRIE77+9IO+/vQTvv70lCCxBYAkCSxBY77+977+9EgTvv70g77+9BO+/vSUILEFgCQJLEFjvv73vv70SBO+/vSDvv70E77+9JQgsQWAJAksQWO+/ve+/vRIE77+9IO+/vQTvv70lCCxBYAkCSxBY77+977+9EgTvv70g77+9BO+/vSUILEFgCQJLEFjvv73vv70SBO+/vSDvv70E77+9JQgsQWAJAksQWO+/ve+/vRIE77+9IO+/vQTvv70lCCxBYAkCSxBY77+977+9EgTvv70g77+9BO+/vSUILEFgCQJLEFjvv73vv70SBO+/vSDvv70E77+9JQgsQWAJAksQWO+/ve+/vRIE77+9IO+/vQTvv70lCCxBYAkCSxBY77+977+9EgTvv70g77+9BO+/vSUILEFgCQJLEFjvv73vv70SBO+/vSDvv70E77+9JQgsQWAJAksQWO+/ve+/vRIE77+9IO+/vQTvv70lCCxBYAkCSxBY77+977+9EgTvv70g77+9BO+/vSUILEFgCQJLEFjvv73vv70SBO+/vSDvv70E77+9JQgsQWAJAksQWO+/ve+/vRIE77+9IO+/vQTvv70lCCxBYO+/vQUyOH7vv73vv73vv71zQzvvv73vv71K77+977+977+9QO+/vc+H77+9au+/vX7vv73vv73vv73vv70/M1Tvv73vv71+dO+/vQXvv71TC+e3r3lqde+/vTvvv71w77+977+977+977+9F++/vSHvv70A6a+F77+977+977+9dO+/ve+/vTTvv73vv70k77+977+977+977+977+977+977+977+977+9Su+/ve+/vVcDZCLvv73vv73vv73vv71O77+977+977+9NU/vv73CgWrvv71vYO+/ve+/ve+/vWtw77+977+977+9zoHvv73vv71A4pu+77+977+9P9qXNgPvv70n77+9al/vv73vv70QJu+/ve+/vWPvv71cfmE677+9X++/vXvvv71y3Lh877+977+9Ou+/vWHvv73vv73vv71qde+/ve+/ve+/ve+/ve+/vX5JHnwzICfvv73vv710S++/vRrvv73vv73vv73vv73vv73vv73vv71P77+92r7vv73vv71/fO+/ve+/vWgzFO+/ve+/ve+/vSfvv705SAhTY3/vv70OE96RPe+/vWZAJsKadHfvv70XZu+/vR5eXyo9NxLvv70udO+/ve+/ve+/vQvvv73vv73vv70e15jvv70n77+977+9Qe+/vQ/vv70r77+9Os+EE0V/77+977+977+9HnwzIO+/vWFlOhF277+977+93bzvv71h77+977+977+977+977+977+9S++/ve+/ve+/vUvvv70jXeWXr++/ve+/ve+/vcqtW++/ve+/ve+/vXXvv73vv73vv70L77+9Du+/ve+/vcWp77+9X++/vUgeUe+/vSthVXoyDO+/ve+/vSrvv70+NdW577+9TAhnfu+/vX7vv70P77+9V++/vWnvv71K77+977+9J++/ve+/ve+/ve+/ve+/vQzvv73vv73vv73vv73vv73vv73vv71177+9Du+/ve+/vUfyiIKcC8+k77+9Q30lD39N147vv70277+977+977+9YUPvv71d77+9ce+/ve+/ve+/vca977+977+9YSLvv71Ide+/ve+/ve+/vTYM77+9WO+/vRzvv70N77+9Re+/ve+/vWjvv73WnjjEnu+/vS8c77+977+977+977+9V2lK77+977+9He+/vWjvv73vv73vv73vv73vv73vv70lTe+/ve+/vVl277+9OR7vv73vv73vv73vv73vv70577+977+977+9O13vv73vv73vv73vv71jW++/ve+/vQ4yEUHvv71y77+9ExHvv71rd++/vRHvv709Ge+/ve+/vQAp77+9aO+/ve+/vXRc77+977+9FT3vv73vv71B77+977+977+977+9zZbvv73vv70F77+9PFbvv71fdu+/ve+/ve+/vTQqJj03X0/vv71K77+977+9d3ffqu+/vcyB7JyM77+977+977+977+977+977+977+977+977+9K++/vU8977+9bH7vv71a77+9OX3vv73vv71K77+977+9au+/ve+/ve+/ve+/vRXvv70MYW/vv73vv718aTTvv73vv73vv73vv73vv73vv70UDu+/vV3vv70q77+977+977+9aNuC77+9PVnvv73vv73vv73vv73vv73vv73vv71P77+9Le+/vUVjZ++/ve+/vR7vv70177+9NO+/ve+/vVxp77+977+977+9FmXvv71vZu+/ve+/vWTvv73vv70c77+977+977+93Zfvv71477+9XO+/vUjvv713bHlmVe+/vR7vv71HDu+/ve+/vT906Kel77+9cO+/ve+/ve+/ve+/vSMb77+9L13vv70X77+9bVtnF++/ve+/ve+/ve+/vV8o77+9Fybvv70eSe+/vSB/3pRt77+9Te+/ve+/ve+/ve+/vWPvv71Z77+977+9Rnfvv73vv71I77+9b3bvv73vv73vv70aG++/ve+/vSVe77+9Zk7vv73vv71NWXTvv73vv73vv714O++/vXtR77+977+9ZyDvv73vv714bu+/vUrTiDIe77+9R++/vQ9377+977+92pF4Ue+/vXvvv73vv73vv70f77+977+92Zbvv73vv70u77+9AQnvv73vv73vv73vv73vv73vv71g77+9Iynvv71877+9Se+/vXonyabvv73vv70lcXsq77+977+9IB/vv73vv70b2bXvv73vv71ZY2MG77+977+977+9fNe177+9Ru+/ve+/vXZ2Z14DZO+/vRvvv71677+977+9Au+/vX8177+977+93Ls7Pu+/vU/vv73vv73vv70f77+977+9Iu+/vVB8MO+/vTB677+977+977+9TO+/vWfvv73vv73vv71077+977+977+977+977+9VHxwLHoiBe+/ve+/ve+/ve+/ve+/vU3vv711aU/vv71f77+977+9Z++/vRfvv71feD3vv73vv73bmTU2Gu+/ve+/vcW977+977+90bIP77+9cy3vv71677+9ARIvX++/ve+/ve+/vQ1S77+9H++/ve+/vSc9Me+/vVfvv70O77+9P++/ve+/vQ8H77+9fQfvv71xddmyMu+/ve+/ve+/ve+/ve+/ve+/vTE+e++/vRtePu+/ve+/vc2V77+977+977+92KVlce+/ve+/vQfvv73vv73vv71n77+977+977+9Le+/vTvvv71NNTbvv71677+9Yu+/vXjvv73vv70nLu+/vXfvv716bu+/ve+/vTRAXu+/vd2777+9Hu+/vWrvv70777+977+977+9IW/vv71tDgwO77+977+9xb9N77+9f9iRPnkq77+977+977+9OTjvv71277+977+9KO+/ve+/vSzvv719K++/ve+/vTQv77+977+9TX7vv71w77+9R++/vUXvv73vv73vv73Rue+/ve+/vTU277+9bnsr2ZIkX++/vXsf77+977+9ZO+/vQFyfe+/ve+/ve+/ve+/vQfvv71/A++/vVDvv71+77+977+9YH84X++/vRBI77+977+9Tu+/vWs/GO+/ve+/ve+/ve+/ve+/vT8E77+9K++/ve+/vR4C77+9AkHvv73vv73vv70lZu+/vV/vv73vv73vv73vv73vv73vv73vv73vv73vv70X77+9EEDvv70L77+9wrPvv73vv71s77+977+9AAAAAElFTkTvv71CYO+/vQ0= 

今、私がしようとする私に、フォームのイメージを与える

public static String getImageStream(String latitude, String longitude) { 
    byte[] result = null; 
    try { 
     URL url = new URL(....); 

     HttpURLConnection connection = (HttpURLConnection) url.openConnection(); 
     connection.setUseCaches(false); 
     connection.setDoOutput(true); 
     DataOutputStream wr = new DataOutputStream(connection.getOutputStream()); 
     wr.close(); 
     InputStream iSteamReader = connection.getInputStream(); 
     BufferedReader reader = new BufferedReader(new InputStreamReader(iSteamReader)); 
     String line; 
     StringBuilder response = new StringBuilder(); 
     while ((line = reader.readLine()) != null) { 
      response.append(line); 
      response.append('\r'); 
     } 
     reader.close(); 
     result = response.toString().getBytes("utf-8"); 
    } catch (IOException e) { 
     logger.error(e.getMessage(), e); 
     result = new byte[0]; 
    } 
    return Base64.getEncoder().encodeToString(result); 
} 

以下のように64エンコードJavaを使用して画像をベースにしようとしていますjavascriptを使ってその画像をレンダリングすると、何もレンダリングされません。私のJSコードが

var image = new Image(); 
    // b64Data contains the string I have showed above from Java API 
    image.setAttribute('src', 'data:image/png;base64,' + b64Data); 
    document.getElementById('imageDiv').appendChild(image); 

Answer 1

以下のようなあなたのbase64でエンコードされたデータの最初の数バイトを調べ、デコードした後、次のとおりです。PNGの実際のファイルヘッダがあるべきこと

"\xef\xbf\xbdPNG\r\x1a\r\x00\x00\x00\rIHDR\x00\x00\x01\xef\xbf\xbd…" 

注：

"\x89PNG\r\n\x1a\n…" 

"\ x89"は "\ xef \ xbf \ xbd"（UTF-8では " "）になり、すべての改行は "\ r"になります。したがって、PNGは誤ってエンコードされています。これは、PNGをテキストとして扱うためです。

---

エラーはここにある：

BufferedReader reader = new BufferedReader(new InputStreamReader(iSteamReader)); 
    String line; 
    StringBuilder response = new StringBuilder(); 
    while ((line = reader.readLine()) != null) { 
     response.append(line); 
     response.append('\r'); 
    } 

バイナリファイルにReaderを使用しないでください。バイナリデータの管理にStringを使用しないでください。これらは両方ともテキストで動作するように設計されています。

バイナリファイルから直接読み取るにはInputStreamを使用し、ByteBufferまたはbyte[]を使用して出力を保存する必要があります。このタスクの場合は、read the whole file into a byte[]と入力してからBase64.getEncoder().encodeToString()を使用してください。これは正しいbyte[]が既に存在するためです。

try (InputStream iSteamReader = connection.getInputStream()) { 
     byte[] byte = IOUtils.toByteArray(iSteamReader); 
     return Base64.getEncoder().encodeToString(byte); 
    }