Convertir une div en image
<!DOCTYPE html>
<html>
<head>
<title>Capturer une div avec html2canvas | par NGLESSON</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keyword" content="Capturer une div avec html2canvas">
<meta name="author" content="Mezgani said">
<meta name="copyright" content="NGLESSON">
<meta name="robots" content="index,follow">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" type="text/css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body class="container">
<div class="row">
<div class="col-lg-8">
<div id="target">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis eleifend elit. Donec lectus sem,
scelerisque sit amet facilisis quis, gravida a lacus. Nunc at lorem egestas, gravida lorem quis, pulvinar ante.
Quisque id tempus libero. Mauris hendrerit nunc risus, ac laoreet lectus gravida et. Nam euismod magna ac enim posuere
sagittis. Fusce at egestas enim, eu hendrerit enim.
</div>
<button class="btn-warning btn btn-xs" onclick="takeScreenShot()">Get screen</button>
<br><br>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
#target {
width: 400px;
height: 300px;
background: #ccc;
color: #fff;
padding: 10px;
font-size: 17px;
font-weight: bold;
}
button {
display: block;
height: 20px;
margin-top: 10px;
margin-bottom: 10px;
}
window.takeScreenShot = function() {
html2canvas(document.getElementById("target"), {
onrendered: function(canvas) {
document.body.appendChild(canvas);
},
width: 900,
height: 400
});
}
