Генерация данных изображения из элемента HTML Canvas

Question

Каков наилучший способ создания данных изображения из содержимого элемента HTML-холста?

Я хотел бы создать данные изображения таким образом, чтобы они могли быть переданы на сервер (пользователю не обязательно иметь возможность напрямую сохранять в файл). Данные изображения должны быть в общем формате, таком как PNG или JPEG.

Решения, которые работают корректно в нескольких браузерах, предпочтительнее, но если каждое решение зависит от браузера, следует использовать последние версии Firefox.

Answer 1

Firefox и Opera имеют метод toDataURL(), который возвращает PNG в формате URL с данными. Вы можете присвоить результат полю поля, чтобы отправить его на сервер.

URL-адрес данных в кодировке base-64, поэтому вам придется декодировать его на стороне сервера. Вы также должны были бы удалить "data: image / png;" часть конечно.

Answer 2

Я думаю, что можно использовать библиотеку Canvas2Image , она использует нативные функции из Canvas, но она не будет работать ни в одном браузере. У меня есть оптимизированная версия этой библиотеки, если вы хотите, я поделюсь ею с вами.

Тогда вы можете получить сгенерированный URI данных и отправить его с помощью Ajax на сервер.