Html2canvas обрезает изображение в верхнем левом углу
У меня есть карта в HTML, и я использую html2canvas, чтобы преобразовать ее в изображение для печати.
Это карта в моем HTML, когда я загружаю свою страницу:
Это изображение, которое я создаю
используя этот код
var map = document.getElementById('FirstMap_CongestionDetail');
html2canvas(map, { scale: 0.5 }).then(canvas => {
var imageData = canvas.toDataURL();
//More code below
});
Похоже, что оно обрезано в левом верхнем углу. Он не скрыт (я уже проверил скрытые отступы, поля и переполнение).
Это html-код, который генерирует исходное изображение:
<div class = "leafletMainMap spainCommunities leaflet-container leaflet-touch leaflet-retina leaflet-fade-anim" id = "FirstMap_CongestionDetail" tabindex = "0" style = "position: relative; min-height: 0px; min-width: 0px; height: 553px;">
Я проверил классы в файле CSS, и ни один из них не является проблемой.
Я видел проблемы с html2canvas, связанные с обрезанием содержимого при попытке преобразовать весь HTML в холст, и они обычно решаются путем удаления прокрутки.
Я уже пробовал следующее, но не помогло:
https://github.com/niklasvh/html2canvas/issues/1438#issuecomment-739244530
Я также пытался изменить высоту и ширину вручную, но это только увеличивало или уменьшало изображение. Оно все еще отрезано.
Есть идеи, почему изображение обрезается?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Прочитав еще раз документацию, я обнаружил, что содержимое можно перемещать с помощью параметров x и y:
function getParams() {
if (document.querySelector('.spainCommunities')) {
return { width: 680, height: 500, x: -130, y: -60 };
}
return { width: 420, height: 420, x: -92, y: -88 };
}
Задача решена!