Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » Guardar contenido html5 canvas en archivo local.

JavaScript - Guardar contenido html5 canvas en archivo local.

Volver
Nuevo Tema
<<>>
 
Vista:
Mensajes realizados anteriormente (No estaban la última vez que entraste)Guardar contenido html5 canvas en archivo local.
Pablo (23/05/2019 11:33:45)527 visitas
2 respuestas
Mensajes realizados anteriormente (No estaban la última vez que entraste)Guardar contenido html5 canvas en archivo local.
xve (23/05/2019 15:23:18)
Mensajes realizados anteriormente (No estaban la última vez que entraste)Guardar contenido html5 canvas en archivo local.
Jaime (04/06/2019 12:09:36)

Guardar contenido html5 canvas en archivo local.

Publicado por Pablo (4 intervenciones) el 23/05/2019 11:33:45
Hola buenos días,

Quiero implementar este pad para firma:
http://szimek.github.io/signature_pad/
en una aplicación web que estoy diseñando.

Lo que quiero es guardar esa firma en un archivo png en un directorio al efecto en el servidor.

Siguiendo el código de la aplicación en GITHUB esta permite "descargar" el archivo png al directorio de descargas que tenga el navegador. Yo lo que necesito es guardarlo en un directorio de mi elección de forma transparente para el usuario.

El código es éste:
1
2
3
4
5
6
7
8
savePNGButton.addEventListener("click", function (event) {
  if (signaturePad.isEmpty()) {
    alert("Please provide a signature first.");
  } else {
    var dataURL = signaturePad.toDataURL();
    download(dataURL, "signature.png");
  }
});

Y yo lo convierto en :
1
2
3
4
5
6
7
8
savePNGButton.addEventListener("click", function (event) {
  if (signaturePad.isEmpty()) {
    alert("Please provide a signature first.");
  } else {
    var dataURL = signaturePad.toDataURL();
    saveAs(dataURL, "signature.png");
  }
});

Pero no funciona. Tampoco da error, porque si lo diera al menos sabría qué está fallando.

He intentado convertir el dataURL en blob por si fuera un problema de tipo de datos, pero tampoco.

Estoy eligiendo este código porque lo quiero implementar en un iPad, dónde el ratón se sustituye por un lápiz o el dedo.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve
Val: 2.998
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Guardar contenido html5 canvas en archivo local.

Publicado por xve (2096 intervenciones) el 23/05/2019 15:23:18
Hola Pablo, has revisado la consola del navegador haber si te da algún mensaje?
Sabes si llama a la función saveAs()?
Que hay en la función saveAs()?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Jaime
Val: 40
Ha aumentado su posición en 2 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Guardar contenido html5 canvas en archivo local.

Publicado por Jaime (14 intervenciones) el 04/06/2019 12:09:36
Porque no intentas hacer las funciones separadas!
1
2
3
4
5
6
7
8
9
10
savePNGButton.addEventListener("click", salvarPng);
 
function salvarPng (event) {
  if (signaturePad.isEmpty()) {
    alert("Please provide a signature first.");
  } else {
    var dataURL = signaturePad.toDataURL();
    download(dataURL, "signature.png");
  }
}
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar