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

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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