передать dataURL через AJAX

Question

Я пытаюсь сохранить dataURL, созданный из холста HTML5, в мою базу данных mysql.

У меня есть настройка ajax для извлечения созданной мной переменной под названием «dataURL», и я устанавливаю dataURL вimg холста с использованием этого кода:

dataURL = oCanvas.toDataURL();

моя проблема в том, что в dataURL холста есть много символов, которые плохо работают при извлечении ajax, поэтому мне нужен способ кодировать его или манипулировать им по-другому, поэтому мойконечный результат может быть сохранен в mysql db, а затем «расшифрован» для отображения еще раз.

Я знаю, что мой AJAX работает, потому что, если я установлю для var dataURL что-то вроде «cheese», он сохранится в базе данных каксыр.

Любая помощь будет высоко ценится!

Answer 1

Данные, которые вы получаете от toDataUrl, будут иметь следующий формат:

 data:image/png;base64,/9j/4AAQSkZJRgABAQAAAQABAAD.... (very long string)

Сначала отфильтруйте полученные данные только по части после data:image/png;base64,

Затем используйте любую библиотеку Base64Ваш язык позволяет декодировать его в массив байтов (или большой двоичный объект).Если вы используете Java: Кодек Apache Commons

Вот пример в groovy:

def bytes = new Base64().decode(filteredData) as byte[]

Вы можете сохранить декодированный результат в своей базе данных (для извлечения)позже)

Answer 2

Кодирование Base64 занимает почти в 4 раза больше байтов для кодирования изображения. Рекомендуется использовать window.atob для декодирования base64 перед передачей, используете ли вы ajax или обычные формы. Конечно, IE не поддерживает его, но это похоже на шим .

Answer 3

Я фактически закончил тем, что установил событие, поэтому, когда изображение было закончено, оно установило dataURL в скрытый элемент формы. Больше не нужно пропускать его через ajax :). Спасибо за предложение, хотя.