I need to save a specific DOM (div, panel, etc) element in image by pressing "X" button, like the following.
When pressing the button that is saved in img all the content of that specific element, as if it were a screen printing but of a specific element
<!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>