0

Как с помощью XMLHttpRequest передать на сервер canvas.toDataURL('image/jpeg') и как эти данные принять в сервлете java в doPost

У XMLHttpRequest есть несколько вариантов отправки данных (гугл в помощь) мне надо передать canvas.toDataURL('image/jpeg') в виде виде blob, array, файл. Соответственно в сервлете принять. Как принять в сервлете blob? У меня сейчас принимаются нули.

9
  • Так и сделать: отправить с клиента XMLHttpRequest и вычитать в сервлете из request.getInputStream(). Что именно у вас не получается?
    – Nofate
    Commented 2 июн. 2015 в 13:58
  • как правильно сформировать XMLHttpRequest ? blob? byteArray? как прочитать request.getInputStream()? читаются нули... как отпрвить файл - без проблем, а вот canvas.toDataURL('image/jpeg') ?
    – Вадим
    Commented 2 июн. 2015 в 14:41
  • @Nofate искал варианты , для подобного не нашёл решения..
    – Вадим
    Commented 2 июн. 2015 в 15:13
  • удалять коменты, минусовать инкогнито - это нормально? комент удалили, так и минус заодно б.
    – Вадим
    Commented 3 июн. 2015 в 12:59
  • Комментарий был удален как нецензурный.
    – Nofate
    Commented 3 июн. 2015 в 13:05

2 ответа 2

1

Ок, мне стало интересно, что же там такого невозможного.

Вот js, отправляем Blob размером 8 байт:

var req = new XMLHttpRequest();
req.open("POST", "/uploadtest");
var a = new Uint8Array([0x00, 0x01, 0x02, 0x03, 0x04, 0x05, 0x06, 0x07]);
var blob = new Blob([a.buffer]);
req.send(blob);

Вот сервлет, который читает байты из стрима:

public class UploadTestServlet extends HttpServlet {

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        ServletInputStream stream = req.getInputStream();

        // замените на любимый способ вычитывания 
        byte[] buf = new byte[128];
        ByteArrayOutputStream bufOut = new ByteArrayOutputStream();
        for(int bytesRead = 0; bytesRead != -1; bytesRead = stream.read(buf)) {
            bufOut.write(buf, 0, bytesRead);
        }

        byte[] bytes = bufOut.toByteArray();  
   }
}

Ну и web.xml:

<servlet>
    <servlet-name>UploadTest</servlet-name>
    <servlet-class>mypackage.UploadTestServlet</servlet-class>
</servlet>

<servlet-mapping>
    <servlet-name>UploadTest</servlet-name>
    <url-pattern>/uploadtest</url-pattern>
</servlet-mapping>

Как видите все по-старинке на голых родных API. 8 байт пришли. Вам остается только получить Blob из canvas.

5
  • Разве не надо смотреть возвращаемое значение и крутить read в цикле?
    – Qwertiy
    Commented 3 июн. 2015 в 15:39
  • @Qwertiy, надо конечно. Просто тут я знаю что байт придет 8. Это просто proof-of-concept. А для вычитывания стрима у каждого свой любимый способ есть.
    – Nofate
    Commented 3 июн. 2015 в 15:41
  • А они обязаны прийти все 8 сразу? Разве не могут по частям?
    – Qwertiy
    Commented 3 июн. 2015 в 15:42
  • @Nofate Ты волшебник!!!! я перепробывал несколько подобных вариантов(5 или более)(приёмной части) все возвращали в buf нули.
    – Вадим
    Commented 3 июн. 2015 в 15:58
  • @Qwertiy, обновил, чтобы никого не смущать.
    – Nofate
    Commented 3 июн. 2015 в 15:58
1

мне надо передать canvas.toDataURL('image/jpeg') в виде "как есть" не преобразовывая в base64

Data uri - это уже base64.

а виде blob

https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob

6
  • СПАСИБО! дельное указание. тут не доглядел., Тогда вопрос несколько изменяется - как принять blob?
    – Вадим
    Commented 3 июн. 2015 в 15:36
  • canvas.toBlob ...к сожалению это только ff
    – Вадим
    Commented 3 июн. 2015 в 17:24
  • @Вадим, там же полифил есть.
    – Qwertiy
    Commented 3 июн. 2015 в 19:11
  • правильное название кастыль :) . его я и так написал.
    – Вадим
    Commented 4 июн. 2015 в 4:05
  • если верить habrahabr.ru/post/119694 (первый комменарий) можно обойтись и без .toDataURL ... только как? @Qwertiy
    – Вадим
    Commented 4 июн. 2015 в 5:11

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.