html2canvas не читает встроенный стиль фона - PullRequest
Новая
       9

html2canvas не читает встроенный стиль фона

0 голосов
/ 04 января 2019

Я использую html2canvas, который прекрасно работает, за исключением того, что цвет фона div не читается при использовании встроенного стиля. Тем не менее, он работает, когда используется таблица стилей, но так как цвет контролируется реакцией, мне нужно, чтобы он лучше читал встроенный стиль, может кто-нибудь помочь исправить это pls?

Мой HTML: 

<div id="testDiv" class="page" style="width: 530px; height: 630px; background-color: red; position: relative;">...</div>

Мой JS: 

function getThumbnail = (div) => {
  return html2canvas(div).then(canvas => {
    return canvas.toDataURL();
  });
}

Изображение отображается без фона в приведенном выше коде, если я не добавлю: 

#testDiv {
  background-color: red;
}

в таблице стилей, но сделать фоновую переменную непросто.

ОБНОВЛЕНИЕ: Я также пытался использовать переменные css, но html2canvas также не принимает этот стиль. 

:root {
  --garment-colour: #000000;
};

#testDiv {
  background-color: var(--garment-colour);
}

1 Ответ

0 голосов
/ 04 января 2019

Показывает фон. Смотрите консольный журнал для данных изображения. 

html2canvas(document.querySelector("#testDiv")).then(canvas => {
    console.log(canvas.toDataURL());
});

Вот скрипка: https://jsfiddle.net/nxrvsphz/

...