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
    });
}
up down tr in table with js

up down tr in table with js

toggle switch style02

toggle switch style02

Page construction avec compte à rebours style02

Page construction avec compte à rebours style02

Loading style water animation

Loading style water animation

Input range slider HTML style04

Input range slider HTML style04

Input file style01

Input file style01

Image hover 04

Image hover 04

Double Scrollbar style in table 01

Double Scrollbar style in table 01

Css Page grid layout

Css Page grid layout

Créer une input search animée

Créer une input search animée

Checkbox et boutons radios personnalisés en CSS

Checkbox et boutons radios personnalisés en CSS

Background overlay

Background overlay