vuej에 이미지 파일로 div 저장

vuej에 이미지 파일로 div 저장

나는 VueJS를 사용하여 div 요소를 이미지 파일로 저장하고자 한다.나는 캔버스를 사용해 보았다.div 요소를 변환하고 이미지 파일로 저장하는 방법

html2canvas : 를 사용할 수 있다.

JS :

html2canvas(document.querySelector("#capture")).then(canvas => {
    document.body.appendChild(canvas)
});

HTML :

<script src="html2canvas.min.js"></script>
<div id="capture" style="padding: 10px; background: #f5da55">
  <h4 style="color: #000; ">Hello world!</h4>
</div>

html2canvas.min.js웹 사이트에 있어야 함:

스크립트가 사용하는 모든 이미지는 동일한 오리진 아래에 있어야 프록시의 도움 없이 읽을 수 있다.마찬가지로 페이지에 크로스 오리진 콘텐츠로 얼룩진 다른 캔버스 요소가 있으면 더러워져 더 이상 html2canvas로 읽을 수 없게 된다.
출처:https://html2canvas.hertzen.com/documentation

vue 내에 html2canvas를 더 쉽게 사용할 수 있도록 vue.js에 대한 래퍼가 있다. https://github.com/mycurelabs/vue-html2canvas

참조URL: https://stackoverflow.com/questions/50758473/save-div-as-image-file-in-vuejs