Guardar contenido de DIV en servidor

  • Autor Autor erwchacon
  • Fecha de inicio Fecha de inicio
E

erwchacon

Curioso
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
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 jquery convert html to image [Example] - Codepedia), 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 para enviarla por correo:

Insertar CODE, HTML o PHP:
$(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!
 
No voy a entrar mucho en detalles.
Para pasar un dato al servidor tienes que enviar el dato a un archivo php para procesarlo en el servidor.

Si colocas el código:
Insertar CODE, HTML o PHP:
$("#btn-Preview-Image").on('click', function () {
         html2canvas(element, {
         onrendered: function (canvas) {
                $("#previewImage").append(canvas);
                getCanvas = canvas;
    var imgageData = getCanvas.toDataURL("image/png");
..........
......
...

Cuando le das click a "btn-Preview-Image", En la variable ImgageData tienes el código de la imagen png en base64.
A partir de ahí tu decides que hacer....pasarla a un archivo php,.. en un formulario,,.por ajax...según el resultado que busques lo tendrás que hacer de una forma o de otra.
También ten en cuenta que pasando una imagen al servidor, si no tomas medidas, es muy fácil inyectar código en el servidor.

Saludos.
 
Última edición:
Milgracias Sevilla666, no entendía muy bien lo de la codificación en base64 pero ya investigué. Excelente tu colaboración. Con esto ya me defiendo para lo que necesito! 🙂
 
Atrás
Arriba