el usuario captura div como imagen y lo guarda en la computadora

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 en la computadora de los usuarios, al igual que el código de impresión que se utiliza para imprimir divs. Soy un principiante de progtwigción, así que toda la ayuda será apreciada.

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

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

    Camino 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; } }); 

    usa un botón y llama a tu valor de 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 } } 

    Suponiendo que desea un archivo de texto o HTML, no un archivo de imagen como una captura de pantalla, JavaScript por sí solo no puede iniciar un cuadro de diálogo “Guardar” en un navegador web, solo una respuesta de una solicitud web a un servidor lo hará.

    Para empezar, necesitará un formulario con su botón y un campo oculto:

     
    stuff to save

    Y necesita un poco de Javascript para guardar los contenidos de DIV en el campo oculto antes de la presentación:

      

    En el servidor, necesitará un código para aceptar el texto y escupirlo en forma de archivo adjunto:

      

    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.

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

       

    Descargo de responsabilidad Construí esta API