JavaScript - Guardar contenido de DIV en servidor

 
Vista:
sin imagen de perfil
Val: 1
Ha aumentado su posición en 60 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Guardar contenido de DIV en servidor

Publicado por Erwin (1 intervención) el 20/01/2017 18:59:58
Hola. Ojalá me pudieran ayudar, llevo días dandole vueltas a este tema.

Tengo una web que con javascript genera un formulario de pedido (se van agregando líneas al pedido) y luego convierte este "formulario" en una imagen la cual necesito enviar a un correo específico. Tengo el código que convierte el div en imagen (lo encontre en http://codepedia.info/editor-example/jquery-convert-html-to-image-example/), pero la imagen la descarga y necesito que NO se descargue si no que se guarde en el servidor, para luego enviarla a un correo por medio de PHP.

El contenido del "formulario" creado se encuentra dentro de un DIV con ID = html-content-holder y el siguiente código (la parte #btn-Convert-Html2Image) descarga la imagen generada, pero necesito es que en lugar de descargarse, se guarde en una carpeta del servidor:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$(document).ready(function(){
 
   var element = $("#html-content-holder");
   var getCanvas;
 
    $("#btn-Preview-Image").on('click', function () {
         html2canvas(element, {
         onrendered: function (canvas) {
                $("#previewImage").append(canvas);
                getCanvas = canvas;
             }
         });
    });
 
	$("#btn-Convert-Html2Image").on('click', function () {
             var imgageData = getCanvas.toDataURL("image/png");
             var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
             $("#btn-Convert-Html2Image").attr("download", "your_pic_name.png").attr("href", newData);
	});
 
});

Agradezco mucho me puedan colaborar con esta inquietud.

Saludos!
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
sin imagen de perfil
Val: 91
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Guardar contenido de DIV en servidor

Publicado por Alfredo (36 intervenciones) el 02/02/2017 15:10:07
Saludos Erwin,

Básicamente tienes que enviar la imagen al servidor usando un form con metodo post
1
2
var dataImagen = getCanvas.toDataURL("image/png");
            var imagen = dataImagen.replace('data:image/png;base64,', '');

dentro del formulario creas un hidden field que contiene la información de la imagen que esta en la variable imagen
Y en el lado de tu php conviertes la informacion que estan de base64 a bytes y de ahi lo grabas como una imagen en el servidor.
Una vez grabado lo puedes enviar por correo.
1
2
3
$imagen = $_POST["imagen"];
$data = base64_decode($imagen);
file_put_contents('/tmp/image.png', $imagen);

Suerte,
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

Guardar contenido de DIV en servidor

Publicado por Feliciano Toledo (1 intervención) el 22/08/2017 00:07:42
Disculpa si lograste encontrar la solución?, tengo el mismo problema y estoy usando el mismo código, ojalá pudieras apoyarme, gracias.
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