[JS] 자바스크립트를 사용한 이미지 클립보드 복사

자바스크립트 이미지 복사

---

브라우저 API인 ClipboardItem 인터페이스를 사용해 이미지를 클립보드에 복사해 다른 곳에 붙여넣기할 수 있는데, 제 경우 html2canvas 라이브러리를 사용해 캔버스를 이미지로 변환하고 자바스크립트에서 미디어 데이터를 다루는 Blob 데이터로 변환해 클립보드로 복사했습니다.

 

1. html2canvas로 캔버스 이미지 생성
2. 캔버스 이미지 -> Blob 데이터로 변환
3. ClipbloadItem을 사용해 복사

이미지 클립보드 복사 예제

---

> npm install --save html2canvas

const target = document.querySelector('#canvasWrap')

html2canvas(target).then(canvas=>{ //1
 
  canvas.toBlob(blob=>{ //캔버스 이미지 blob 데이터로 변환 //2
      navigator.clipboard.write([  //3
        new ClipboardItem({
          'image/png': blob //<- 복사할 blob 데이터
        })       
      ]);
  });
  
});

 

ClipboardItem을 사용할 때, 리액트의 경우 "ClipboardItem' is not defined  no-undef" 에러가 뜨는데 아래 코드를 넣어주면 해결됩니다.

 

const { ClipboardItem } = window;

크로스 브라우징 문제

---

 

지원되는 브라우저가 변경되어 내용을 수정했습니다. 크롬/엣지/사파리에서는 지원되며 파이어폭스에서는 지원을 안하는 상황입니다.

MDN Docs

---

ClipboardItem - Web APIs | MDN