Html2canvas отображает только части элемента, видимые в области просмотра - PullRequest
Новая
       19

Html2canvas отображает только части элемента, видимые в области просмотра

0 голосов
/ 15 ноября 2018

У меня есть элемент, у которого нет заданной ширины или высоты, из которого я делаю снимок экрана.Он помещается в локальное хранилище для использования в качестве фонового изображения на следующей странице.Проблема в том, что если масштаб документа увеличен, то изображение также или часть элемента обрезана, и на нем отображается только видимая часть изображения.Я полагаю, что решение было бы установить ширину и высоту на основе размера документа, но я не уверен, как это реализовать, потому что на это не так много документации или потоков.

Функция для захватапоказано ниже: 

function oncap() {

var crt = "none";
var canv = document.getElementById("allcontainer");
html2canvas(canv).then(function(canvas) {
    window.localStorage.clear;
    localStorage.setItem(canvasName, canvas.toDataURL("image/jpeg"));
    window.location.href = 'FLOWCANVASTEST.html';

}); 
}

Редактировать: решение в конечном итоге оказалось на стороне дисплея, а не на самом захвате.Когда я извлекал изображение из локального хранилища, я устанавливал его как фоновое изображение;установка размера фона для разрешения решенной проблемы с масштабированием для всех, кто получает такую ​​вещь.

1 Ответ

0 голосов
/ 15 ноября 2018

Итак, что вы можете сделать, прежде чем нарисовать свой холст, вы можете прочитать размер экрана и затем передать его холсту при рисовании изображения, чтобы ваша инициализация холста выглядела примерно так: 

initCanvas: function () {
            canvas = document.getElementById('canvas-man');
            c = canvas.getContext('2d');
            canvas.width = document.getClientWidth;
            canvas.height = document.getClientHeight;
            return canvas;
        },

Тогда вы можете передать высоту и ширину функции сложенного изображения, а также 

putImage: function (x,y) {
            var img = document.createElement('img');
            img.onload = function () {
                c.drawImage(img, 0, 0, x, y);
            }
            img.src = 'images/products.jpg';
            img.id = 'canvasImage';
    }
...