화면캡쳐 후 클립보드로 복사
June 16, 2022 - [image, clipboard, dom-to-image]
전체 화면을 캡쳐해서 클립보드에 복사해 넣는 방법입니다.
dom-to-image 설치
https://www.npmjs.com/package/dom-to-image
yarn add dom-to-image
Source
import domtoimage from 'dom-to-image'
export default function CaptureScreen() {
return (
<span
onClick={async () => {
const dataUri = await domtoimage.toPng( document.getElementById('root'), ) const blob = await fetch(dataUri).then(res => res.blob()) await navigator.clipboard.write([ new window.ClipboardItem({ 'image/png': blob }), ])
window.alert('captured!')
}}
style={{
width: 26,
backgroundColor: '#222',
cursor: 'pointer',
padding: '1px',
borderRadius: '100%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
>
<img
src="data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjMuMiIvPgogICAgPHBhdGggZD0iTTkgMkw3LjE3IDRINGMtMS4xIDAtMiAuOS0yIDJ2MTJjMCAxLjEuOSAyIDIgMmgxNmMxLjEgMCAyLS45IDItMlY2YzAtMS4xLS45LTItMi0yaC0zLjE3TDE1IDJIOXptMyAxNWMtMi43NiAwLTUtMi4yNC01LTVzMi4yNC01IDUtNSA1IDIuMjQgNSA1LTIuMjQgNS01IDV6Ii8+CiAgICA8cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+Cjwvc3ZnPgo="
alt="Try html2canvas"
className="css-1bgbwga"
/>
</span>
)
}