Как я могу использовать dom-to-image или html2canvas с Vue.js? - PullRequest
Новая
       8

Как я могу использовать dom-to-image или html2canvas с Vue.js?

0 голосов
/ 05 февраля 2019

Я пытался захватить определенную часть моей веб-страницы с помощью html2canvas весь день, но постоянно получал сообщение об ошибке.Затем я решил попробовать dom-to-image, однако он не работает и не будет регистрировать данные в консоли для отладки.

Моя цель - захватить часть фонового изображения, содержащегося внутри элемента div, и разместить его на экране в виде изображения.Кажется простым, но стало очень сложным.Похоже на https://www.squarspace.com.

Как я уже говорил, я пробовал html2canvas, но безрезультатно.Если у вас есть решение, связанное с этой библиотекой, я хотел бы услышать это!Тем не менее, мой код ниже предназначен для dom-to-image. 

export default {
    name: "WebsiteDevelopment",
    data() {
        return {
            windowWidth: 0,
            websiteHeader: "",
        }
    },
    watch: {
        windowWidth(newWidth, oldWidth) {
        }
    },
    mounted() {
        this.$nextTick(() => {
            window.addEventListener('resize', () => {
                this.windowWidth = window.innerWidth
                console.log(this.windowWidth)
                this.captureElement();
            });
        })
    },
    methods: {
        captureElement() {
            var node = document.getElementById('capture');
            domtoimage.toPng(node)
            .then(function (dataUrl) {
                var img = new Image();
                img.src = dataUrl;
                console.log(img.src)
                this.websiteHeader = require(img.src);
            })
            .catch(function (error) {
                console.error('oops, something went wrong!', error);
            });
        },
    }
}

Приведенный выше код ничего не записывает в консоль и не обновляется websiteHeader.Я ожидал, что консоль покажет мне URL, а затем будет определен заголовок веб-сайта в качестве этого URL.

Обновление: я не вызывал функцию captureElement (), но теперь я получаю и получаюновая ошибка.

Uncaught ReferenceError: domtoimage не определено

...