captura de usuario div como imagen y guardar en computadora

Question

Tengo una div en mi sitio, quiero colocar un botón/enlace (u otras cosas del tipo) que al hacer clic guardará el div y todos sus contenidos a los usuarios computadora, al igual que el código de impresión que se utiliza para imprimir divs. Soy un principiante de programación, así que toda la ayuda será apreciada.

Answer 1

Hay un límite de compatibilidad del navegador que hace esto. HTML2Canvas puede representar su contenido HTML en un elemento canvas. Luego puede usar el método canvas.toDataURL("image/png"); (docs in MDN) para exportar el elemento canvas a una imagen jpeg o png.

No es ampliamente compatible, pero aún es posible.

Answer 2

Suponiendo que desea un archivo de texto o HTML, no un archivo de imagen como una captura de pantalla, JavaScript no puede iniciar un diálogo "Guardar" en un navegador web, solo una respuesta de una solicitud web a un servidor hazlo.

Para empezar, se necesita un formulario con su botón y un campo oculto:

<div id="saveme">stuff to save</div> 
<form action="saveme.aspx" method="POST"> 
    <input type="submit" onclick="prepsave()"> 
    <input type="hidden" id="savemepost"> 
</form> 

y necesitas algo de JavaScript para guardar el contenido DIV para el campo oculto antes de presentarlos:

<script> 
    function prepsave() { 
     document.getElementById("savemepost").value = 
     document.getElementById("saveme").innerHTML; 
     return true; 
    } 
</script> 

en el servidor, necesitará algo de código para aceptar el texto y escupir de nuevo en la forma de un archivo adjunto:

<script runat="server"> 
    Response.Clear() 
    Response.AddHeader("content-disposition","attachment; filename=saved.html") 
    Response.Write(Request.Form("savemepost")) 
</script> 

Advertencia # 1: Probablemente hay algunos errores menores y mucho margen de mejora, esto es solo una prueba de concepto.

Advertencia # 2: El código del lado del servidor anterior es potencialmente inseguro, ya que permite que cualquier página web controle el contenido que va desde el dominio al navegador web del usuario. Deberá agregar algunas medidas para evitar que se abuse de este.

Answer 3

manera fácil

var MyDiv1 = document.getElementById('DIV1'); 
var MyDiv3 = document.getElementById('DIV2'); 
MyDiv3.innerHTML = MyDiv1.innerHTML; 


html2canvas(MyDiv3, { 
        useCORS: true, 
        onrendered: function (canvas) { 
        var dataUrl = canvas.toDataURL("image/png"); 
        document.getElementById("HiddenField1").value = dataUrl; 

        } 
       }); 

uso de un botón y llamar ur valor del campo oculto

ButtonClick1() 
{ 
    string imgval = HiddenField1.Value; 
    imgval = imgval.Replace("data:image/png;base64,", ""); 
    byte[] imgData = Convert.FromBase64String(imgval); 

    using (System.Drawing.Image image = System.Drawing.Image.FromStream(new MemoryStream(imgData))) 
    { 
     String path = Server.MapPath("~/imgFolder"); 
     image.Save(path + "\\output.jpg", ImageFormat.Jpeg); // Or Png 

    } 
} 

Answer 4

Una manera fácil de hacer esto sería utilizar la API de JavaScript de GrabzIt a capture a div. Solo necesitarías hacer algo como lo siguiente. Donde #features es la identificación del div que desea capturar.

<script type="text/javascript" src="grabzit.min.js"></script> 
<script type="text/javascript"> 
GrabzIt("Your Application Key").ConvertURL("http://www.example.com/my-page.html", 
{"target": "#features", "bheight": -1, "height": -1, "width": -1}).Create(); 
</script> 

Descargo de responsabilidad He creado esta API!