Как сделать снимок экрана определенного элемента html div в vue.js
В моем веб-приложении я хочу разрешить пользователю выбирать из списка различных стилей подписи. Когда пользователь выбирает один стиль подписи, я хочу сфотографировать стиль подписи и сохранить его на сервере. Я пробовал использовать библиотеку canvas2html, похоже, она не работает.
Я искал vue-библиотеки, которые могут сфотографировать определенный элемент, но есть только скриншот всей веб-страницы.
mounted() {
// Element might not have been added to the DOM yet
this.$nextTick(() => {
// Element has been definitely added to the DOM
// is there any way to acces the div element via el element???
html2canvas(document.getElementById('container')).
then(function(canvas) {
document.body.appendChild(canvas);
});
console.info(this.$el.textContent); // I'm text inside the component.
});
}
я пытался использовать github.com/mycure-inc/vue-html2canvas эту библиотеку. всякий раз, когда я добавляю импорт VueHtml2Canvas из 'vue-html2canvas'; Vue.use(VueHtml2Canvas); ------------------ Это приводит к этой ошибке в веб-пакете --------------------------- --Uncaught ReferenceError: regeneratorRuntime не определен
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Пробую библиотеку html2canvas, вроде работает нормально.
Сначала убедитесь, что вы уже установили библиотеку:
npm install html2canvas
И в компоненте:
async mounted () {
let el = this.$refs.hello.$el; // You have to call $el if your ref is Vue component
this.output = (await html2canvas(el)).toDataURL();
}
Если вы уже используете vue-html2canvas, вы можете сделать так:
async mounted() {
let el = this.$refs.hello.$el;
let options = { type: "dataURL" };
this.output = await this.$html2canvas(el, options);
}
Примечание. Кажется, у vue-html2canvas есть проблема с babel, см. Время выполнения регенератора Babel 6 не определено, чтобы узнать, как это исправить (в моем примере я просто импортирую "regenerator-runtime/runtime").
Спасибо!!! codeandbox.io/s/r7n9qmlxmo у меня работает. асинхронный монтаж () { let el = this.$refs.hello.$el; console.info(this.$refs+"значение моей ссылки") console.info(el+"значение моей ссылки") } можете ли вы сказать мне, почему мы используем хук жизненного цикла асинхронного монтирования. У меня есть несколько подписей, из которых пользователь может выбирать, поэтому у меня будет несколько ссылок. когда я получаю доступ к одной ссылке из нескольких ссылок. ссылка дает мне undefined.
Я использую async mount только для примера. Я создаю codeandbox.io/s/31z1vj7815 на основе клика пользователя. $ref может быть неопределенным из-за того, что элемент еще не визуализирован (возможно, из-за рендеринга условия, такого как v-if).
В чем проблема? Этот код отлично работает, чтобы скопировать элемент контейнера и воссоздать его на холсте.