Base64对图像进行编码并在JS

时间：2016-10-31 14:42:08

标签： javascript java

我正在尝试使用Java编码图像，如下所示

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);
}

这给了我一张表格的图像

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=

现在，当我尝试使用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);

1 个答案:

答案 0 :(得分：5)

解码后，base64数据的前几个字节是：

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

请注意，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');
    }

我们注意到＆＃34; \ x89＆＃34;成为＆＃34; \ xef \ xbf \ xbd＆＃34;这是＆＃34;�＆＃34;在UTF-8中，所有新行都成为＆＃34; \ r＆＃34;。很明显，PNG编码错误，这是因为将PNG视为文本。

错误在于：

Reader

不要在二进制文件上使用String。不要使用InputStream来管理二进制数据。这两个数据都旨在处理文本。

您应该直接使用ByteBuffer来读取二进制文件，并使用byte[]或Base64.getEncoder().encodeToString()来存储输出。对于此任务，我们只需read the whole file into a byte[]，然后对结果使用byte[]，因为我们已经获得了正确的 try (InputStream iSteamReader = connection.getInputStream()) { byte[] byte = IOUtils.toByteArray(iSteamReader); return Base64.getEncoder().encodeToString(byte); } 。

// separate all the value-key pairs in chicken into an array
$array = explode("\n", $_GET["chickens"]);

// init an array that will store all values as associative array
$chickens = array();

foreach($array as $valuepair) {
    // go too the key-value-pairs and split them at the "=" char
    $tmp = explode("=", $valuepair);
    // add value under keyname to array and remove some spaces with trim function 
    $chickens[trim($tmp[0])] = trim($tmp[1]);
}

// show what we got as key-values, as debug output 
print_r($chickens);

// show one value of the array
echo $chickens['quantity'];
相关问题
最新问题