Looking for a solution to capture the div with id my-char when char is clicked? I want to take a screenshot without the parent background color and use it on serverside. I've tried some methods but none seem to work.
Here is the code snippet and jsFiddle link: https://jsfiddle.net/wyrustaaruz/umL3zdk2/12/
const HasanRiza = () => {
const TestButton = () => {
/* Want to screenshot the div with id my-char when char is clicked */
/* Sending the screenshot to serverside with axios */
/* Do not want to include background Color */
}
return (
<
div style = {
{
backgroundColor: 'blue'
}
} >
<
div onClick = {
() => TestButton()
}
id = {
"my-char"
}
className = "character-absolute" >
<
img id = "canvas"
src = {
"http://178.128.68.183/images/43ae4572-bb41-4a7c-8541-eafc49627d84.png"
}
style = {
{
width: '43%',
maxWidth: 435,
minWidth: 200
}
}
/> <
img src = {
"http://178.128.68.183/images/ffb64bf0-5da4-4de5-bd83-de9cd4e570f5.png"
}
style = {
{
width: '43%',
maxWidth: 435,
minWidth: 200
}
}
/> <
img src = {...
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
.character-absolute img {
position: absolute;
top: 10px;
left: 10px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.1/umd/react-dom.production.min.js"></script>