0

Necesito guardar un elemento DOM (div, panel, etc) especifico en imagen al presionar "X" boton, como los siguientes.

Al presionar el boton que se guarde en img todo el contenido de ese elemento especifico, como si fuera una impresion de pantalla pero de un elemento en especifico

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ejemplo</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
  <h2>Ejemplo</h2>
  <div class="panel-group">
    <div class="panel panel-default">
      <div class="panel-heading">Panel 1</div>
      <div class="panel-body">Prueba 1
<button type="button" class="btn btn-success">Guardar IMG</button> 
</div>
    </div>

    <div class="panel panel-primary">
      <div class="panel-heading">Panel 2</div>
      <div class="panel-body">Prueba 2 <br> <button type="button" class="btn btn-success">Guardar IMG</button> </div>
    </div>

    <div class="panel panel-success">
      <div class="panel-heading">Panel 3</div>
      <div class="panel-body">Prueba 3 <br> <button type="button" class="btn btn-success">Guardar IMG</button></div>
    </div>

    <div class="panel panel-info">
      <div class="panel-heading">Panel 4</div>
      <div class="panel-body">Prueba 4 <br> <button type="button" class="btn btn-success">Guardar IMG</button></div>
    </div>

    <div class="panel panel-warning">
      <div class="panel-heading">Panel 5</div>
      <div class="panel-body">Prueba 5 <br> <button type="button" class="btn btn-success">Guardar IMG</button></div>
    </div>

    <div class="panel panel-danger">
      <div class="panel-heading">Panel 6</div>
      <div class="panel-body">Prueba 6 <br> <button type="button" class="btn btn-success">Guardar IMG</button></div>
    </div>
  </div>
</div>

</body>
</html>

1 respuesta 1

0

Puedes usar un plugin como html2canvas que te permite tomar capturas de pantalla del dom, te dejo el link: html2canvas

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.