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>