React JS Div to png or capture of Div

Question

I have a problem on Screenshot or capture of div whatelse. I want to take a screenshot of div which id is my-char when I clicked on char.How can I take capture of div. I need to take screenshot of div without parent background color. I am going to use the screenshot on serverside. I tried some tricks but not work.

Below the code and jsFiddle link: https://jsfiddle.net/wyrustaaruz/umL3zdk2/12/

const HasanRiza = () => {

  const TestButton = () => {
    /* I want to take a screenshot of div which id is my-char when I clicked on char. */
    /* I am going to send the screenshot on serverside with axios */
    /* I dont want to take 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 = {
      "http://178.128.68.183/images/b8917e8f-22eb-495c-8dbb-6fb1123144cd.png"
    }
    style = {
      {
        width: '43%',
        maxWidth: 435,
        minWidth: 200
      }
    }
    /> <
    img src = {
      "http://178.128.68.183/images/b94bc8b6-300d-40e1-824b-fa722d3c69e4.png"
    }
    style = {
      {
        width: '43%',
        maxWidth: 435,
        minWidth: 200
      }
    }
    /> <
    img src = {
      "http://178.128.68.183/images/10336ef8-cadc-49f8-ad9e-1a890d5a3f7b.png"
    }
    style = {
      {
        width: '43%',
        maxWidth: 435,
        minWidth: 200
      }
    }
    /> <
    img src = {
      "http://178.128.68.183/images/9b898c9c-7d83-493c-bf23-4a2000e587ef.png"
    }
    style = {
      {
        width: '43%',
        maxWidth: 435,
        minWidth: 200
      }
    }
    />

    <
    /div>

    <
    img id = {
      "rightHere"
    }
    width = {
      100
    }
    height = {
      300
    }
    /> <
    /div>
  )
}


ReactDOM.render( <
  HasanRiza / > ,
  document.getElementById('container')
);

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>

Answer 1

Use html2canvas npm module to capture canvas and convert it to image as below

import html2canvas from 'html2canvas'

const TestButton = () => {
  html2canvas(document.body).then(canvas => 
    canvas.toDataURL()
  ) 
}