Récupérer le contenu d'une div et la convertir en image avec Html2canvas

/
Solutions techniques
/
Récupérer le contenu d'une div et la convertir en image avec Html2canvas

Récupérer le contenu d'une div et la convertir en image avec Html2canvas

Javascript, Html2canvas
Développement front-end

Fichier index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>NGLESSON.COM</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="Récupérer le contenu d'une div et la convertir en image avec Html2canvas">
    <meta name="description" content="Récupérer le contenu d'une div et la convertir en image avec Html2canvas">
    <meta name="author" content="Mezgani said">
    <meta name="copyright" content="NGLESSON">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="container" id="canvasContent">
   <h1>ASSALAMO ALAYKOUM</h1>
   <div class="row mt-5 mb-5" id="imgdownld"></div>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script> 
   <script src="script.js"></script> 
</body>
</html>

Fichier script.js

html2canvas([document.getElementById('canvasContent')], {
    onrendered: function (canvas) {
        //document.getElementById('imgdownld').appendChild(canvas);
        var data = canvas.toDataURL('image/png');
        var image = new Image();
        image.src = data;
        document.getElementById('imgdownld').appendChild(image);
    }
});