I coded this in react
function download(element) {
html2canvas(element).then((canvas) => {
window.open(canvas.toDataURL('image/png'));
});
}
return (
<div className='box' onClick={(e) => download(e.target)}>
<h2>
<img src={logo} alt='logo' draggable='none' />
{title}
</h2>
<p>{text}</p>
</div>
);
and some css styling
@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500|Roboto:300,400,500&display=swap');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
#root {
display: flex;
flex-direction: column;
gap: 2em;
padding-top: 2em;
padding-bottom: 2em;
}
.boxContainer {
display: flex;
flex-direction: column;
align-items: center;
gap: 2em;
}
.box {
background-color: #212120;
width: 600px;
padding: 0.9em;
cursor: pointer;
}
.box h2,
.box p {
--color: rgb(218, 218, 218);
font-size: 1.5em;
font-weight: 400;
color: var(--color);
}
...
The purpose of my code is to capture a screenshot of an element. The functionality works well, however, there is a small white space (around 2px high) at the bottom of the screenshot. Any suggestions on how to remove it? Thank you :)