Generar datos de imagen del elemento de lienzo HTML

Question

¿Cuál es la mejor forma de generar datos de imagen a partir del contenido de un elemento de lienzo HTML?

Me gustaría crear los datos de imagen para que puedan transmitirse a un servidor (no es necesario que el usuario pueda guardarlos directamente en un archivo). Los datos de imagen deben estar en un formato común, como PNG o JPEG.

Se prefieren las soluciones que funcionan correctamente en varios navegadores, pero si todas las soluciones dependen del navegador, las versiones recientes de Firefox deberían ser el objetivo.

Answer 1

Creo que una lib que puede usar es Canvas2Image, usa características nativas de Canvas, pero no funcionará en ningún navegador. Tengo una versión optimizada de esta lib, si quieres, la compartiré contigo.

Luego puede obtener el generado Data URI y enviarlo usando Ajax al servidor.

Answer 2

Firefox y Opera tienen un método toDataURL() que devuelve un PNG con formato URL de datos. Puede asignar el resultado a un campo de formulario para enviarlo al servidor.

La URL de datos está codificada en base 64, por lo que deberá decodificarla en el lado del servidor. También necesitaría quitar los "datos: image/png;" parte del curso