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
    });
}
Drag and drop or upload input file

Drag and drop or upload input file

Form login b4 01

Form login b4 01

Form login et créer un compte style01

Form login et créer un compte style01

Form login with background image changed style01

Form login with background image changed style01

Image hover 06

Image hover 06

Input range slider HTML style01

Input range slider HTML style01

Lightbox gallery style01

Lightbox gallery style01

Organization Chart

Organization Chart

Pie Charts

Pie Charts

Radio button style

Radio button style

Table responsive avec css native

Table responsive avec css native

Timeline style04

Timeline style04