DOMの画像化について

[Daiki-Shiraki]

DOMの画像化はおそらく、html2canvasがいいんじゃなかろうかと思った。
過去に画像化を使用した際のコードがあるから参考にして下さい。

import React, { useEffect } from 'react'
import { Button, Container } from 'react-bootstrap' // Button追加
import html2canvas from 'html2canvas'

type Props = {
    name:string
}
const MakePicture: React.FC<Props> = ( {name}) => { 
    const makePicture = async () => {
      const elem = document.querySelector("#target") as HTMLElement;  
      console.log(elem)
    html2canvas(elem, {scale:2,allowTaint:true}).then(function(canvas) {
      const a = document.createElement('a')
      const dataURI = canvas.toDataURL("image/png");
      a.href = dataURI
      const name = name +'.png'
      a.download = name
      a.click()
    });    
      }
return (
<>
  <Button className='mt-3' type='button' variant='primary' onClick={makePicture}>保存する</Button> {/* 追記 */}
</>
)
}
export default MakePicture