Html2canvas: Возвращает пустое изображение для любого элемента, если высота тела документа превышает 30 000 пикселей.

Созданный на 31 мая 2016 · 16Комментарии · Источник: niklasvh/html2canvas

Библиотека возвращает пустое изображение, если размер тела документа превышает 30 000 пикселей. Вы бы попытались захватить элемент размером 100 x 100. Но вы получите пустое изображение элемента, находящегося на высоком теле.

Вот скрипка, демонстрирующая эту ошибку.

https://jsfiddle.net/fvo1xh8b/2/

Вы можете изменить размер тела меньше 30 000 и все работает нормально.

Needs More Information

Источник

charlie-lk

Самый полезный комментарий

@niklasvh Это сложный вопрос, но на самом деле это связано с ограничениями размера холста. Я думаю, что это необходимо снова открыть, чтобы обсудить, как реализовать правильное поведение. Определенно, белое размытое изображение - это неправильное поведение.

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

В моем случае я клонирую все тело и просто устанавливаю максимальную ширину / высоту: html2canvas(el, {height: 3000, width: 3000}) .

toadkicker 10 окт. 2018

👍9 ❤2 🎉2 👎1

Все 16 Комментарий

У меня такая же проблема, как и у вас. Вы нашли какое-нибудь решение?

Sebastianvarv 15 февр. 2017

http://stackoverflow.com/questions/37520013/html2canvas-returns-invalid-image-when-the-body-height-is-more-than-30000-pixels

charlie-lk 15 февр. 2017

эмм, у меня та же проблема, но, наконец, я понял!
в моем случае вот мое решение:
поместите iframe в элемент тела, например

<html>
  <head>
  #canvas_handler {
   position:absolute;
   left: -10000px;
  }
  </head>
  <body>
  <iframe id="canvas_handler" />
  </body>
</html>

и каждый элемент, который вам нужно скрыть на холсте, вы можете скопировать и поместить в этот iframe, и использовать html2canvas, а затем удалить его, как это

const copy_ele = origin_ele.cloneNode(true);
canvas_handler.appendChild(copy_ele);
canvas_handler.style.height = origin_ele.scrollHeight;
canvas_handler.style.width = origin_ele.scrollWidth;
html2canvas(copy_ele, {
      useCORS: true,
     }).then((canvas) => {
       // do your things
     });
canvas_handler.removeChild(table_ele);

netweng 25 окт. 2017

Это все еще проблема с версией 1.0.0 ? Если да, не могли бы вы поделиться примером на jsfiddle .

niklasvh 12 дек. 2017

Эта проблема была автоматически закрыта, так как на наш запрос о дополнительной информации от первоначального автора не поступило ответа. Имея только ту информацию, которая в настоящее время является проблемой, у нас недостаточно информации для принятия мер. Если у вас есть или вы найдете нужные нам ответы, свяжитесь с нами, чтобы мы могли продолжить расследование.

no-response[bot] 12 дек. 2017

привет, когда я пытаюсь отобразить iframe с помощью внутренней IP-камеры, он возвращает недействительное изображение, пожалуйста, не могли бы вы мне помочь?

AntonioDilorenzo 21 авг. 2018

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

toadkicker 10 окт. 2018

👍9 ❤2 🎉2 👎1

@toadkicker, брат, ты сохрани мой код / работу сегодня хахахахахахахах, большое спасибо

leandrosouza0786 26 сент. 2019

@toadkicker Спасибо!

Liberateur 24 дек. 2019

эмм, у меня та же проблема, но, наконец, я понял!
в моем случае вот мое решение:
поместите iframe в элемент тела, например
<html>
  <head>
  #canvas_handler {
   position:absolute;
   left: -10000px;
  }
  </head>
  <body>
  <iframe id="canvas_handler" />
  </body>
</html>
и каждый элемент, который вам нужно скрыть на холсте, вы можете скопировать и поместить в этот iframe, и использовать html2canvas, а затем удалить его, как это
const copy_ele = origin_ele.cloneNode(true);
canvas_handler.appendChild(copy_ele);
canvas_handler.style.height = origin_ele.scrollHeight;
canvas_handler.style.width = origin_ele.scrollWidth;
html2canvas(copy_ele, {
      useCORS: true,
     }).then((canvas) => {
       // do your things
     });
canvas_handler.removeChild(table_ele);

Я пробовал этот метод, но точно не работает. По-моему, будет работать с кодом ниже:

const copy_ele = origin_ele.cloneNode(true);
canvas_handler.contentDocument.body.appendChild(copy_ele);
canvas_handler.height = origin_ele.scrollHeight;
canvas_handler.width = origin_ele.scrollWidth;
html2canvas(canvas_handler.contentDocument.body, {
  useCORS: true,
}).then((canvas) => {
  // do your things
  canvas_handler.removeChild(copy_ele);
});

И если вы хотите применить свой стиль css так же, как и в текущем документе, вам также необходимо скопировать стиль в iframe:

// add style
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'your_style_file_url.css';
canvas_handler.contentDocument.head.appendChild(link);

const copy_ele = origin_ele.cloneNode(true);
canvas_handler.contentDocument.body.appendChild(copy_ele);
canvas_handler.height = origin_ele.scrollHeight;
canvas_handler.width = origin_ele.scrollWidth;
html2canvas(canvas_handler.contentDocument.body, {
  useCORS: true,
}).then((canvas) => {
  // do your things
  canvas_handler.removeChild(copy_ele);
});

ricosmall 16 мар. 2020

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

toadkicker 16 мар. 2020

эмм, у меня та же проблема, но, наконец, я понял!
в моем случае вот мое решение:
поместите iframe в элемент тела, например
<html>
  <head>
  #canvas_handler {
   position:absolute;
   left: -10000px;
  }
  </head>
  <body>
  <iframe id="canvas_handler" />
  </body>
</html>
и каждый элемент, который вам нужно скрыть на холсте, вы можете скопировать и поместить в этот iframe, и использовать html2canvas, а затем удалить его, как это
const copy_ele = origin_ele.cloneNode(true);
canvas_handler.appendChild(copy_ele);
canvas_handler.style.height = origin_ele.scrollHeight;
canvas_handler.style.width = origin_ele.scrollWidth;
html2canvas(copy_ele, {
      useCORS: true,
     }).then((canvas) => {
       // do your things
     });
canvas_handler.removeChild(table_ele);
Я пробовал этот метод, но точно не работает. По-моему, будет работать с кодом ниже:
const copy_ele = origin_ele.cloneNode(true);
canvas_handler.contentDocument.body.appendChild(copy_ele);
canvas_handler.height = origin_ele.scrollHeight;
canvas_handler.width = origin_ele.scrollWidth;
html2canvas(canvas_handler.contentDocument.body, {
  useCORS: true,
}).then((canvas) => {
  // do your things
  canvas_handler.removeChild(copy_ele);
});
И если вы хотите применить свой стиль css так же, как и в текущем документе, вам также необходимо скопировать стиль в iframe:
// add style
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'your_style_file_url.css';
canvas_handler.contentDocument.head.appendChild(link);

const copy_ele = origin_ele.cloneNode(true);
canvas_handler.contentDocument.body.appendChild(copy_ele);
canvas_handler.height = origin_ele.scrollHeight;
canvas_handler.width = origin_ele.scrollWidth;
html2canvas(canvas_handler.contentDocument.body, {
  useCORS: true,
}).then((canvas) => {
  // do your things
  canvas_handler.removeChild(copy_ele);
});

в моем случае все элементы имеют svg или встроенный стиль, поэтому мне не нужно добавлять таблицу стилей. но да, вы должны добавить свою таблицу стилей при необходимости

netweng 30 мар. 2020

Я столкнулся с той же проблемой. Мне нужно было сделать изображение из модального окна (с фиксированной позицией). У меня всегда получалось белое изображение. Проблема была в позиции прокрутки. Этот код работает для меня:

const el = document.getElementById('html-to-canvas-area')
const area = el.getBoundingClientRect()
html2canvas(el, {
  scrollX: 0,
  scrollY: 0,
  width: area.width,
  height: area.height
})

invisor 24 сент. 2020

🎉5 👍3 ❤1

Сработало для меня как шарм! Спасибо за умное решение!

flaviostutz 30 сент. 2020

@invisor спаситель! Это единственное, что у меня сработало.

MEGApixel23 26 окт. 2020

Эта опция также может быть решением для прокрутки связанных дел.

{
  scrollX: 0,
  scrollY: -window.scrollY
}

seahindeniz 9 нояб. 2020

❤2 🎉1

Была ли эта страница полезной?

0 / 5 - 0 рейтинги

Смежные вопросы

HTML2Canvas не фиксирует ориентацию EXIF

Loki180 · 4Комментарии

Обещание html2canvas возвращено до завершения рендеринга

tjchambers32 · 3Комментарии

css3 проблемы

koreanman · 4Комментарии

Такая хреновая библиотека

kunal886496 · 3Комментарии

Не удалось сделать снимок экрана динамически загружаемого div

bishwapoudel · 4Комментарии