将 JS Div 反应为 png 或捕获 Div

Question

我在截屏或捕获 div whatelse 时遇到问题。当我点击 char 时，我想截取 id 为 my-char 的 div 的屏幕截图。如何捕获 div。 我需要在没有父背景颜色的情况下截取 div 的屏幕截图。 我将在服务器端使用屏幕截图。 我尝试了一些技巧，但没有奏效。

下面的代码和 jsFiddle 链接： 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

使用 html2canvas npm 模块捕获画布并将其转换为图像，如下所示

import html2canvas from 'html2canvas'

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