Создание встроенного изображения с помощью java gwt

Йохен,

Я провел обширные тесты с различными библиотеками кодирования Base64:

• (gwt-base64) http://snipt.net/tweakt/gwt-base64/
• (google) http://code.google.com/p/google-web-toolkit/source/browse/trunk/user/src/com/google/gwt/user/server/Base64Utils.java?r=5962

• (apache) http://commons.apache.org/codec/

• Протестированные браузеры: Chrome 14.0.797.0 dev-m, Firefox 5

• Тестовые изображения: jpeg, gif, png

Тестовый код:

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) Работает с этим конструктором: new Base64(-1) = без структурных линий, без URL-безопасности.

Заслуга: вы можете заставить реализацию Google работать, если измените последние 2 символа карты символов: «$», «_» на «+», «/».

Мой главный вывод заключается в том, что библиотека Base64, которую вы сейчас используете, содержит ошибки. Я предлагаю при поиске альтернативных реализаций попытаться сохранить поток байтов между изображением и кодировщиком base64 в двоичном формате (byte[]). Строка может работать, если используется одно и то же кодирование/декодирование, но это рискованно, если кодирование и декодирование выполняются в двух разных местах (например, клиент/сервер).

Удачи!

P.S. Попробуйте этот :-)

<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
}-*/;

• Этот блог JS очень помог.
• Этот ресурс отлично подходит для понимания работы Javascript: XMLHTTPRequestObject

Люблю раскалывать крепкий орешек, но я применил все это, и все же кодировка base64 не работает. Между JS и Java-оболочкой все еще существует проблема с кодировкой, и я не могу получить декодированную строку обратно в правильный байт []. Перепробовал все возможные комбинации кодировок. Возможный способ - использовать base64 для req.responseText с использованием собственной библиотеки javascript и вернуть строку java-аналогу.

Пока что по исходному вопросу.

Теперь рассмотрим некоторые альтернативные идеи и требования, лежащие в основе вашего вопроса: во время моего исследования я увидел, что Base64 очень часто используется для встроенных изображений на стороне сервера, чтобы избежать дополнительных 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 :-(");
    }
}

Ваша строка с кодировкой изображения кажется неправильной, вы пропустили включение типа содержимого изображения.

http://en.wikipedia.org/wiki/Data_URI_scheme

данные:[][;charset=][;base64],

Вы уверены, что данные изображения, которые вы получили, верны? Поскольку вы запрашиваете изображение в виде текста, возможно, GWT обрабатывает двоичные данные перед вызовом вашего обратного вызова (например, экранирование непечатаемых символов).

unknown не является допустимым типом MIME. Ваш URI данных должен начинаться с data:image/png или любого другого значения, подходящего для отображаемого изображения. Несмотря на неверный тип MIME, утилита file не распознает декодированные данные из первого отправленного вами URL-адреса. Что это должен быть за файл?

Вот небольшой пример кода, когда мне нужно было сгенерировать серверную часть Captcha для сдерживания ботов. Кажется, вы знаете, что делаете, поэтому для краткости я опускаю настройку сервлета.

В любом случае есть 2 места, где я вижу, что что-то идет не так.

1) Ваш response.getText() не является правильной кодировкой изображения. Только проблема, если вы загружаете из БД или используете инструмент, который генерирует изображение как экземпляр класса Java Image.

2) Вы должны установить тип пантомимы. data:unknown должен быть допустимым типом mimetype, например data:image/jpeg (ссылка http://www.w3schools.com/media/media_mimeref.asp) Если вы не установите MIME-тип, браузер должен угадать, и если он угадает неправильно, ваше изображение не будет отображаться.

Я предлагаю использовать установленный кодек с соответствующим типом mime (jpeg, gif, png), предполагая, что вы загружаете из byte[], а не из файла, и я также предлагаю использовать sun.misc.BASE64Encoder().encode(byte[]) так как вы можете быть уверены, что он работает как задумано.

Сторона клиента

ThecoderslibraryGWT.loginService.capImage( 
        new AsyncCallback<String>() {

    @Override
    public void onFailure(Throwable caught) {
        error.setHTML(caught.getMessage());
    }

    @Override
    public void onSuccess(String result) {
        String base64EncodedImage = result;             
        img.setUrl("data:image/jpg;base64," + base64EncodedImage);
        vp.setVisible(true);
    }
});

/**
 * 64 Bit encoded captcha image
 */
public String capImage() {

    byte[] data = null;

    // the output stream to render the captcha image as jpeg 
    ByteArrayOutputStream jpegOutputStream = new ByteArrayOutputStream();
    try {                       
        // get the session id that will identify the generated captcha. 
        //the same id must be used to validate the response, the session id is a good candidate!
        String captchaId = this.getThreadLocalRequest().getSession().getId();

        BufferedImage challenge = CaptchaServiceSingleton.getInstance().getImageChallengeForID(captchaId, this.getThreadLocalRequest().getLocale());

        // a jpeg encoder
        JPEGImageEncoder jpegEncoder = JPEGCodec.createJPEGEncoder(jpegOutputStream);

        jpegEncoder.encode(challenge);


        ByteArrayOutputStream os = new ByteArrayOutputStream();
        ImageIO.write(challenge, "jpg", os);
        data= os.toByteArray();         

    } catch (IllegalArgumentException e) {
        e.printStackTrace();
        throw new IllegalArgumentException("Unable to create validation image.");
    } catch (CaptchaServiceException e) {
        e.printStackTrace();
        throw new IllegalArgumentException("Unable to create validation image.");
    } catch (IOException e) {
        e.printStackTrace();
        throw new IllegalArgumentException("Unable to create validation image.");
    }

    return new sun.misc.BASE64Encoder().encode(data);
}

2 вероятные причины:

1) Ваш код на стороне сервера, читающий изображение и отправляющий его через HTTP, искажает кодировку двоичного формата изображения перед входом в Base64.encode(response.getText()). Если у вас есть доступ к серверу, Base64.encode ваше изображение на сервере и просто передать его через:

callback.onSuccess("data:unknown;base64,"+ response.getText()); // response already in Base64

2) Если у вас нет доступа к серверной части, попробуйте избежать перевода строки в вызове response.getText().

new ResponseReceivedHandler<byte[]>() {
    public void onResponseReceived(ResponseReceivedEvent<byte[]> event) {
        final Response<byte[]> response = event.getResponse();
            if (response.getStatusCode() == HTTP_OK){
                callback.onSuccess("data:unknown;base64," + Base64.encode(**response.getData()**));
            }
        }
     }, options);
} catch ...

для чего это стоит, я опубликую свое решение для отправки изображений на сервер. Он использовал вызовы RPC, которые, как я читал, вы не можете использовать, но, возможно, это помогает.

//Клиент

public void onModuleLoad() {
    HTML html = new HTML(
            "<img src=\"data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGP C/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IA AAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1J REFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jq ch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0 vr4MkhoXe0rZigAAAABJRU5ErkJggg==\" alt=\"Red dot\">");

    RootPanel.get().add(html);

    greetingService.greetServer("", new AsyncCallback<String>() {

        @Override
        public void onSuccess(String result) {
            HTML html = new HTML(
                    "<img src=\"data:image/png;base64, "+ result + "\" alt=\"Window Logo\">");

            RootPanel.get().add(html);
            RootPanel.get().add(new Label(result));

        }

        @Override
        public void onFailure(Throwable caught) {
            // TODO Auto-generated method stub

        }
    });
}

// сервер

общедоступная строка welcomeServer (ввод строки) выдает исключение IllegalArgumentException {

    // BASE64Encoder

    try{FileInputStream img = new FileInputStream(
            "C:\\icon_a.png");
    ByteArrayBuffer bab = new ByteArrayBuffer(0);
    int eof = 0;
    while (eof != -1) {
        eof = img.read();
        bab.append(eof);
    }

     String rets = new BASE64Encoder().encode(bab.toByteArray());
        return rets;

    }catch (Exception e) {
        // TODO: handle exception
    }

    return null;
}

PS: это изображение http://www.drweb.de/icons/twitter/pd_twitter_iconset/pd_twitter_iconset/PNG/256/icon_a.png