Попытка передать изображение, хранящееся в хранилище данных GAE, изначально созданное с помощью canvas.toDataURL().

У меня есть холст, нарисованный пользователем.

В JavaScript я делаю:

var data = canvas.toDataURL().substr(22);

// snipped code that sets up xhr POST to "d/"

var params = "img=" + encodeURIComponent(data);
xhr.send(params);

Я substr(22), чтобы избавиться от "data:image/png;base64,"

Затем в движке приложения я делаю:

doodle.setProperty("img", new Text(req.getParameter("img")));

Поэтому я устанавливаю свойство img объекта doodle в значение canvas.toDataURL().substr(22)

Теперь, когда я хочу получить изображение, я делаю:

if (debugimg) {
    resp.setContentType("text/plain");
    resp.getWriter().print(((Text)groove.getProperty("img")).getValue());
}
else {
     resp.setContentType("image/png;base64");
     resp.getWriter().print(((Text)groove.getProperty("img")).getValue());
}

Но хоть убей, образ никогда не всплывает.

Вот пример. Я нарисовал это и могу сохранить и отрендерить в JavaScript.

https://yougotadoodle.appspot.com/d.jsp?id=1483002

Если я использую debugimg, это то, что сохраняется:

http://yougotadoodle.appspot.com/d?id=1483002&img=true&debugimg=true

Но когда я пытаюсь обслужить его с помощью setContentType("image/png;base64") или даже просто "image/png", вы получаете неработающую картинку:

http://yougotadoodle.appspot.com/d?id=1483002&img=true

Я пробовал несколько разных вещей, в том числе не использовать substr(22). Есть идеи?

Я попытался использовать Blob(), поэтому сохранил его так:

doodle.setProperty("img", new Blob(req.getParameter("img").getBytes()));

и читать так:

resp.getWriter().print(((Blob)groove.getProperty("img")).getBytes());

Но это, казалось, выплевывало что-то вроде этого:

[B@1f11e0f

java javascript canvas image google-app-engine
person MikeHelland    schedule 26.02.2014    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Вы должны декодировать эту строку, прежде чем использовать ее как image/png, потому что это версия с кодировкой Base64.

Я проверил это локально на Python, и ваш Hello SO! отлично работал после декодирования данной строки. Я не знаю, как это сделать на Java, но это должно быть довольно просто.

person Lipis    schedule 26.02.2014

arrow_upward
0
arrow_downward

Вот три фрагмента кода, которые сработали для меня на стороне JS (jpg) благодаря свойству put to a blob. Может не оптимально, но работает. ХТН. -степ

Создайте визуализацию холста:

imgFinalData = canvas.toDataURL('image/jpg', 1.0);

Переменная настройки для POST to GAE:

f64 = imgFinalData.substr(imgFinalData.indexOf(',')+1).toString();

Сообщение в GAE (fd — это массив, используемый для хранения нескольких переменных POST):

fd.push('bytes=' + escape(f64));
//Here is the call with fd that handles the post:
postXmlHttpRequest(url, fd.join('&'), handlePostFinal);

Одна сторона GAE (Python):

Свойство, в котором хранятся данные POST (строка из класса сущностей):

байты = db.BlobProperty (требуемый = Истина, индексированный = Ложь)

Как обрабатываются почтовые данные b/4 put:

данные = urllib.unquote(self.request.get('bytes'))

данные = данные.заменить(' ','+')

байты = base64.b64decode (данные + '=' * (4 - len (данные) % 4))

Строка свойств внутри оператора сущности для put:

байты = db.Blob (байты),

person stevep    schedule 26.02.2014