Сохранить div как файл изображения в vuejs

Question

Я хочу сохранить элемент div как файл изображения, используя VueJS.Я пытался использовать холст.Как я могу преобразовать и сохранить элемент div как файл изображения?

Answer 1

Вы можете использовать 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 должно быть в вашемвеб-сайт:

Все изображения, используемые сценарием, должны находиться в одном источнике, чтобы они могли читать их без помощи прокси-сервера.Точно так же, если на странице есть другие элементы canvas, которые были испорчены контентом из разных источников, они станут грязными и больше не будут читаться html2canvas
Источник: https://html2canvas.hertzen.com/documentation