Html2Canvas: разные изображения, созданные на разных устройствах. - PullRequest
Новая
       33

Html2Canvas: разные изображения, созданные на разных устройствах.

0 голосов
/ 04 августа 2020

Я использую Html2Canvas для преобразования содержимого div в строку base64.

Но я изо всех сил пытаюсь настроить его правильно. Это дает разные результаты для разных результатов. Я предполагаю, что это как-то связано с разрешением экрана.

Вот мой код: 

html2canvas(document.querySelector('#dpo_base_image'),
{
    height: $('#dpo_base_image').height(),
    width: $('#dpo_base_image').width(),
    useCORS: true,
    allowTaint: true,
}
).then(canvas => {
   $('<input>').attr('type', 'hidden').attr('name', 'properties[_DataUrl]').attr('value', canvas.toDataURL()).appendTo('form');
});

Глядя на документацию, у меня есть несколько вариантов, как показано ниже:

  1. Масштаб: масштаб, используемый для рендеринга. По умолчанию используется соотношение пикселей устройства браузера.
  2. width: ширина холста.
  3. height: высота холста.
  4. windowWidth: ширина окна для использования при рендеринге Элемент, который может влиять на такие вещи, как запросы мультимедиа.
  5. windowHeight: высота окна для использования при визуализации элемента, который может влиять на такие вещи, как запросы мультимедиа.

Более подробная информация представлена ​​здесь: https://html2canvas.hertzen.com/configuration

Я внутренний разработчик и не знаю, как на это могут повлиять размеры или разрешения экрана.

Может ли кто-нибудь указать меня в направлении постоянного получения изображения шириной 2000 пикселей и высотой 2479 пикселей?

Я попытался поместить эти значения в параметры ширины / высоты, но все равно получаю разные результаты. любая помощь.

...