Йохен,
Я провел обширные тесты с различными библиотеками кодирования Base64:
Тестовый код:
public static void main(String [] args) throws IOException {
File file = new File("./resources/so.png");
BufferedInputStream bufRead = new BufferedInputStream(new FileInputStream(file));
ByteBuffer buffer = ByteBuffer.allocate(30*1024) ; // x kb
byte[] c = new byte[1];
while ((bufRead.read(c))>0) { //1 byte/time to avoid buffer arithmetics
buffer.put(c);
}
byte[] data = new byte[buffer.position()];
buffer.flip();
buffer.get(data);
String dataAsSt = new String(data); // transform the data to a string -- encoding error-prone
//gwt-base64
//String gwtBase64 = GwtBase64.encode(dataAsSt); //doesn't work
//google base64 impl
String googleBase64 = Base64Utils.toBase64(data);
//apache base64 codec
Base64 base64codec = new Base64(-1);
String apacheBase64 = base64codec.encodeToString(data);
System.out.println("Google:"+googleBase64);
System.out.println("Apache:"+apacheBase64);
//System.out.println("GWTb64:"+gwtBase64);
}
Выводы:
(gwt-base64) Не работал вообще.Сбой: java.lang.StringIndexOutOfBoundsException: String index out of range на каждом изображении, которое я пробовал.Обратите внимание, что я закомментировал код.
(google) Кодировка Base64, которую он создает, не может быть понята браузером.
(apache) Работает с этим конструктором: новый Base64 (-1) = без перерывов, без url-safe.
Кредитный балл : Вы можете заставить реализацию Google работать, если вы измените последние 2 символа карты символов: '$', '_' на '+', '/'.
Мой основной вывод заключается в том, что используемая в настоящее время библиотека Base64 содержит ошибки.Я предлагаю при поиске альтернативных реализаций попытаться сохранить поток байтов между изображением и кодером base64 в двоичном формате (byte []).Строка может работать, если используется одно и то же кодирование / декодирование, но рискованно, если кодирование и декодирование выполняются в 2 разных местах (например, клиент / сервер).
Удачи!
PS:Попробуйте это: -)
<img src="data:unknown;base64,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"/>
Редактировать: Дальнейшие исследования
Я потратил больше времени, чем разумно, пытаясь найти решение.Оболочка GWT не позволит вам получать необработанные данные, но вы можете использовать JSNI, чтобы заставить браузер получать двоичные данные:
native String getBinaryResource(String url) /*-{
// ...implemented with JavaScript
var req = new XMLHttpRequest();
req.open("GET", url, false); // The last parameter determines whether the request is asynchronous -> this case is sync.
req.overrideMimeType('text/plain; charset=x-user-defined');
req.send(null);
if (req.status == 200) {
return req.responseText;
} else return null
}-*/;
Мне нравится ломать крепкий орешек, но я применил всеи тем не менее, кодировка base64 не работает.Между JS и Java-оболочкой все еще существует проблема кодирования, и я не могу вернуть String обратно в правильный байт [].Перепробовал все возможные комбинации кодирования.Один из возможных способов - это использовать base64 для req.responseText с использованием нативной библиотеки javascript и возвращать строку в java-аналог.
Пока что для вашего исходного вопроса.
Теперь рассмотрим некоторые альтернативные идеи и требования, стоящие за вашим вопросом: в ходе моего исследования я видел, что Base64 очень часто используется для встраивания изображений на стороне сервера , чтобы избежать дополнительных накладных расходов HTTP на HTTP.получить изображения на клиенте.Кажется, это популярная альтернатива для CSS-встраивания.
В контексте этого вопроса код работает на клиенте (браузере), и эти причины не применимы.Использование базового XMLHTTPRequest для получения двоичного изображения создает дополнительный HTTP-запрос от вашего браузера к серверу.Учитывая, что в контексте клиента у вас, очевидно, есть URL-адрес изображения (передаваемый на IoProvider.get().makeRequest(*url*,...), есть причина, по которой мы не можем позволить браузеру выполнить задание посредством простого динамического обновления, если объект изображения:
(это может быть не лучший пример кода, но он дает вам картинку (извините за каламбур ;-))
void setImage(String url) {
final HTML imageHolder = new HTML();
String imgTag = "<IMG src='"+url+"' />'";
imageHolder.setHTML(imgTag);
RootPanel.get("imageContainer").add(imageHolder); // imageContainer is a div
}
Редактировать: гайка треснула
Наконец-то нашли последний недостающий фрагмент головоломки: как правильно декодировать двоичные данные из строки JavaScript. Обратите внимание на некоторые предостережения: не будет работать в IE, учитывая, что они не поддерживают метод overrideMimeType в собственном XMLHTTPRequest.
native String getBinaryResource(String url) /*-{
var req = new XMLHttpRequest();
req.open("GET", url, false); // The last parameter determines whether the request is asynchronous.
req.overrideMimeType('text/plain; charset=x-user-defined');
req.send(null);
if (req.status == 200) {
return req.responseText;
} else return null
}-*/;
private void sendRequestBinary() {
String url = URL.encode("/Computer_File_030.gif");
String data = getBinaryResource(url);
if (data != null) {
// The secret sauce: Method to decode the binary data in the response string
byte[] binData = new byte[data.length()];
for (int i=0;i<data.length();i++) {
binData[i] = (byte)(data.charAt(i) & 0xff);
}
final HTML imageHolder = new HTML();
String base64=Base64Utils.toBase64(binData);
String imgTag = "<IMG src='data:image/gif;base64,"+base64+"' />'";
imageHolder.setHTML(imgTag);
RootPanel.get("imageContainer").add(imageHolder);
errorLabel.setText("Base64:");
} else {
errorLabel.setText("Another error :-(");
}
}