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
    });
}
texte animate effects style 01

texte animate effects style 01

Timeline style08

Timeline style08

Timeline style02

Timeline style02

Scroll to div ID

Scroll to div ID

Partager sur les réseaux sociaux

Partager sur les réseaux sociaux

Page construction avec compte à rebours style01

Page construction avec compte à rebours style01

Header with background animate 01

Header with background animate 01

Gallery images with bootstrap4 Flexbox

Gallery images with bootstrap4 Flexbox

Double Scrollbar with Plugin Jquery in table

Double Scrollbar with Plugin Jquery in table

Creation dune icone de prechargement avec css

Creation dune icone de prechargement avec css

Carousel 6 Column Product Slider with B4

Carousel 6 Column Product Slider with B4

Arrows Defense Game

Arrows Defense Game