[JavaScript] canvas 이미지 클립보드에 복사하기

최근 html2canvas.js를 활용하여 canvas에 스크린샷을 찍어서 보여주는 기능을 만들었는데

여기에 추가적으로 클립보드에 복사할 수 있는 기능이 필요하다하여 기록해둔다.

 

일단 예제를 통해 접근해보자.

 

▷ 예제1)

canvas.toBlob(function(blob){
    var item = new ClipboardItem({ "image/png": blob });
    navigator.clipboard.write([item]);
});

 

코드는 일단 canvas에 html2canvas.js를 활용한 스크린샷 이미지가 존재한다는 가정하에 사용이 가능하며

코드 자체는 길지 않다.

 

다만 몇가지 주의 사항이 있는데 일단 IE에서는 사용이 불가능하다.

(IE에서는 역시 되는게 없다...)

그림 출처 : https://caniuse.com/mdn-api_clipboarditem

 

그리고 두번째 주의사항은

localhost 혹은 https 에서만 사용이 가능한 기능이다.

http를 사용하는 도메인이라면 포기하도록 하자.

---

참고 : https://stackoverflow.com/questions/27863617/is-it-possible-to-copy-a-canvas-image-to-the-clipboard

Is it possible to copy a canvas image to the clipboard?

---

어느 브라우저에서도 사용 가능한 클립보드 복사 기능을 찾으려 해봤는데 도저히 나오지 않아서 이정도만 기록해둔다.