About HTML2Canvas
HTML2Canvas allows you to create a "screenshot" of whole webpage or a particular part of it. The screenshot is saved as canvas directly on the user's browser. The canvas is capture exactly based on the data available on the page, but The canvas which is captured may differ and quality is poor as compared to its presentation on the user's browser.
About Canvas2Image
A tool of saving or converting canvas to images
Creating a file that takes screenshots and download/saves it locally
In this post I will be sharing how I used HTML2Canvas and Canvas2Image to create a screenshot and then download of it locally. I have been using HTML2Canvas recently and wanted to download the screenshot as well. Well finally I got the solution from here and there, specially from StackOverflow.
I wanted to have a page having multiple div(s) having different contents and dedicated download buttons for each. But the method that I found was having seperate defined functions for each download button. That was such a hassle. I mean who would like to have seperate function for same task just because you have to select different element. So, I used JQuery to select each div by ID.
To make this work I used previous version of HTML2Canvas because I wanted to use onrendered feature which is obsolute in the latest version.
HTML2Canvas.js 0.4.1
Download
HTML Code
<![CDATA[
<!--DOCTYPE html-->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Screenshot and Download</title>
</head>
<body>
<div class="M-container">
<div class="messg">
<span class="info">
<p class="name">By Bishal Biswas</p>
<p class="dateAndTime">10-Mar-21, 9:25 PM</p>
</span>
<div class="content" id="widget">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Earum illum
consequuntur nihil dicta cupiditate suscipit ducimus fugit hic ratione.</p>
</div>
<div class="shareBtn">
<a class="btnSave2" data-id="widget">Share</a>
</div>
</div>
</div>
</body>
</html>
]]>
I have given each div an ID and added an attribute 'data-id' having the value of the ID of the div. Later using JQuery I am accessing the ID using this attribute and putting it in the html2canvas function
CSS Code
<![CDATA[
<style>
*{padding:0; margin:0;font-family: 'Poppins', sans-serif;}
body{background-color:#0d48a999;
}
.Header{text-align:center; color:#fff;padding:25px 0;}
.M-container {}
.M-container p{margin:1em;}
.M-container .messg {
display: flex;
padding: 10px 0;
border-bottom: 3px solid #fff;
}
.M-container .messg p {
font-size: normal;
}
.M-container .messg .content {
border: 1px solid;margin:15px;
width: 90%;
border-radius: 5px;
cursor: pointer;
background-color: #fff;
box-shadow: 0px 2px 7px -8px;
transition: all 0.5s ease-in-out;
}
.M-container .messg .content p {
padding: 1rem;
}
.M-container .messg .content:hover {
box-shadow: 0px 2px 8px -3px;
}
.M-container .messg .content .info {
display: flex;
padding: 0.5rem 0;
border-bottom: 0.1px solid;
}
.M-container .messg .content .info p {
padding: 0 1rem;
}
.M-container .messg .content .info .name{font-weight:bold;}
.M-container .messg .downBtn {
width: 10%;color:#fff;
font-size:xx-large;
display: flex;
justify-content: center;
align-items: center;
}
.M-container .messg .downBtn .btnSave{cursor: pointer;}
@media (max-width: 540px) {
.M-container .messg .content {
width: 75%;
}
.M-container .messg .shareBtn {
width: 25%;
}
}
</style>
]]>
JavaScript & JQuery Code
<![CDATA[
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://github.com/niklasvh/html2canvas/releases/download/0.4.1/html2canvas.js"></script>
<script src="https://hongru.github.io/proj/canvas2image/canvas2image.js"></script>
]]>
<![CDATA[
<script>
$(function () {
$(".btnSave").click(function () {
let Canv_Widget = $(this).attr("data-id");
html2canvas($("#" + Canv_Widget), {
onrendered: function (canvas) {
saveAs(canvas.toDataURL(), "Quote.png");
}
});
});
/*Idea taken from StackOverflow */
function saveAs(uri, filename) {
var link = document.createElement("a");
if (typeof link.download === "string") {
link.href = uri;
link.download = filename;
//Firefox requires the link to be in the body
document.body.appendChild(link);
//simulate click
link.click();
//remove the link when done
document.body.removeChild(link);
} else {
window.open(uri);
}
}
});
</script>
]]>
As I have set each and every download button a same class 'btnSave', I am using 'this' keyword to access the particular element which was clicked. Then using '$(this).attr("data-id")' to get the ID and then passsing it to the html2canvas function
Screenshots:
Downloaded File:
Working Solution:
See the Pen
HTML2Canvas Screenshot and Download image by bishal-biswas (@bishal-biswas)
on CodePen.
Conclusion
I am trying to find solution with the latest version of HTML2Canvas as we can get high quality of the canvas while capture. I will be uploading the solution as soon as I get it working.
If you like this article or find it helpful, please do share it with colleagues and friends.
Comments