Convert HTML to Image using html2canvas
Question
I developed a simple div element which contains text.
I Tried to convert the html to PNG using html2canvas and output it as an image in another image. While running it in my local server , Rendering is initialized successfully based on the console.log
118ms html2canvas: Canvas renderer initialized (1350x18 at 8,8) with scale 1
But the output image is not appending in the assigned div element.
Any help would be much appreciated!
JAVASCRIPT
function myFunction () { html2canvas(document.getElementById("hi"), { onrendered: function(canvas) { theCanvas = canvas; document.body.appendChild(canvas); // Convert and download as image Canvas2Image.saveAsPNG(canvas); document.getElementById("img-out").append(canvas); } }); }
HTML
<html>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
<body onload="myFunction()">
<div id ="hi">
Hi There !
</div>
</br></br></br></br></br></br>
<div id="img-out"></div>
</body>
</html>
1 answers
solution1
0 2019-03-14 02:24:24
You can get canvas as an image source & display the image on your page. Please note that if you are using latest version of html2canvas library, 'onrendered' function is deprecated. Use the following script instead
function myFunction (){
html2canvas(document.querySelector("#hi")).then(canvas => {
document.body.appendChild(canvas);
var img = document.createElement("img"); // create an image object
image.src = canvas.toDataURL(); // get canvas content as data URI
document.getElementById('img-out').appendChild(image);
});
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.