[ html2canvas ] html을 이미지로 클립보드에 복사하기 ( with Vue.js )

 

html로 작성된 특정 영역을 클립보드에 이미지로 복사해야 하는 상황에 사용!

 

html2canvas 설치

// Install NPM
npm install --save html2canvas

// Install Yarn
yarn add html2canvas

https://html2canvas.hertzen.com/

 

 

html2canvas 사용하기

1. 사용할 페이지에 import 하기

import html2canvas from "html2canvas"

 

2. 캡쳐할 html 가장 바깥쪽 element 에 ref 지정

<div ref="chartcapture" ......  > .. <div/>

 

3. canvas를 캡쳐하는 이벤트를 실행할 버튼을 만든다
( 필요에 따라 해당하는 이벤트를 만들면된당 )

<button @click="copyChartImg" />

 

4. copyChartImg 메소드 작성

copyChartImg() {
      html2canvas(self.$refs.chartcapture.$el).then(canvas => {
        canvas.toBlob(blob => navigator.clipboard.write([new ClipboardItem({"image/png": blob})]))
      })
    }

 

5. 그럼 클립보드에 해당 영역이 복사된다 👍

 

 

---

✔️참고

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