반응형
lib 추가후 콘솔창에서 테스트해보니 잘 동작함. 적당히 필요에 따라 수정해서 사용하면 편리할듯.
<!-- html2canvas 라이브러리 추가 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
// 3초 뒤 실행 (실행 버튼 누르고 바로 웹페이지 본문을 마우스로 한 번 클릭하세요!)
setTimeout(async () => {
try {
// 1. 강제 포커스
window.focus();
// 2. 캡처할 대상 요소를 선택 (예: #layoutCanvas 또는 .drum-layout-container)
const targetEl = document.querySelector('body'); // 원하는 selector로 변경 가능
// 3. html2canvas로 캔버스 생성
const canvas = await html2canvas(targetEl);
// 4. Blob 변환 및 클립보드 복사
canvas.toBlob(async (blob) => {
if (!blob) return;
const item = new ClipboardItem({ 'image/png': blob });
await navigator.clipboard.write([item]);
console.log('✅ 클립보드 복사 성공! (Ctrl+V로 붙여넣어 보세요)');
}, 'image/png');
} catch (err) {
console.error('❌ 실패 원인:', err);
}
}, 3000);반응형
'개발 > Javascript' 카테고리의 다른 글
| 서버에서 List<Map>형태로 받아온 데이터 json 형태 배열로 바꾸기 (0) | 2025.08.12 |
|---|---|
| input 의 값이 너무 길때 tooltip로 표시하기 (0) | 2025.03.20 |
| 7일차: 자바스크립트 심화 개념 및 실습 프로젝트 (1) | 2025.02.02 |
| 6일차: DOM 조작과 이벤트 처리 (0) | 2025.02.01 |
| 5일차: 객체와 배열 (0) | 2025.01.31 |
