HTML5 Canvas не будет отображать данные, полученные из canvas.toDataURI ()

Question

У меня есть холст HTML5. Я .toDataURI и отправляю это на PHP с AJAX. PHP хранит это в базе данных.

Тогда у меня есть другая страница, на которой есть элемент img для запроса этих данных из базы данных и их рендеринга. Но это ... не будет. Данные поступают, я вижу их с помощью функции просмотра источника браузера:

<img id="embedded" src="data:image/png;base64,iVBORw...5CYII=" />

(добавлено многоточие)

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

Я пробовал это с URI изображения, сгенерированным из других источников, и нет проблем. Я проверял это в Chrome 12 и Firefox 5, поведение было одинаковым в обоих.

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

Это мой код принимающей стороны:

http://pastebin.com/Hw1ykd1i

А для конца отправки:

http://pastebin.com/hwsEfsaD

Answer 1

Если я полностью понял вашу проблему - вы говорите, что приемник не работает (то есть то, что отражает вывод).

Вам необходимо закодировать ваши данные:

function postToServer(data) {
  data = "data=" + encodeURIComponent(data);
  // continue with XHR POST

Это работает с пустым холстом, потому что он состоит из букв без каких-либо символов. Как только вы рисуете, значение base64 canvas содержит символы, такие как +, что на языке POST означает пробел. Поэтому, если вы encodeURIComponent укажите свое значение, эти символы будут отправлены на ваш сервер в целости и сохранности, и получатель сможет правильно отобразить вывод.