Как сделать прозрачный цвет белым вместо черного в html2canvas?

Я пытаюсь сделать снимок экрана с помощью html2canvas:

var body = document.getElementById("body")
$(body).html2canvas({onrendered: function( canvas ) {  
     var urlData = canvas.toDataURL("image/jpeg");  
}});

Мой фон тела прозрачен, поэтому urlData из-за jpeg имеет черный фон (не белый, как в браузере).
Как я могу исправить это поведение и сделать цвет фона белым в этом случае?

Ответ 1

Я изменил временный: _html2canvas.Util.isTransparent из

_html2canvas.Util.isTransparent = function(backgroundColor) {
  return (backgroundColor === "transparent" || backgroundColor === "rgba(0, 0, 0, 0)");
};

_html2canvas.Util.isTransparent = function(backgroundColor) { return (backgroundColor === "transparent" || backgroundColor === "rgba(0, 0, 0, 0)" || backgroundColor === undefined); };

и после этого достаточно было вызвать html2canvas с набором фоновых параметров:

html2canvas(screenshot_element, {
    background :'#FFFFFF',
    onrendered: function (canvas) {
      .....
    }
  });

Для меня... имеет смысл рассмотреть прозрачный фон undefined.

Ответ 2

Попробуйте это

var body = document.getElementById("body") 
$(body).html2canvas({background:'#fff', onrendered: function( canvas ) {  
 var urlData = canvas.toDataURL("image/jpeg");  
}});

Ответ 3

fooobar.com/questions/416241/...

просто добавьте css background-color: #ffffff в таблицу:)

надеюсь, что это поможет

Я завернул содержимое в div для каждой желаемой страницы и дал class="pdfpage", затем установил css как pdfpage{background:#FFFFFF;}

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

Ответ 4

Я бы сказал, это стало еще проще (30/05/18) - просто передайте backgroundColor: null в параметрах html2canvas:

html2canvas(
    document.querySelector("#some-id-to-export"),
    {backgroundColor: null}
).then(canvas => {$("#id-to-render-transparent-bg-img").html(canvas);});

Ответ 5

var body = document.getElementById("body")
$(body).html2canvas({onrendered: function( canvas ) {  
     var urlData = canvas.toDataURL("image/jpeg");  
},
background: '#fff'});

Два года спустя, но обновленная версия должна принять такой параметр.,

Ответ 6

Не беспокойтесь, теперь просто добавьте фон: '#FFFFFF', он работает нормально

                   html2canvas(element, {
                       background: '#FFFFFF',
                       onrendered: function (canvas) {
                           $("#previewImage").append(canvas);
                           getCanvas = canvas;
                       }
                   });

Ответ 7

Если вам нужно, чтобы фактические данные изображения были непрозрачными, используйте fillRect (0, 0, width, height) с fillStyle 'white'.

Еще один способ сделать это, но это довольно медленно (возможно, несколько миллисекунд), это использовать getImageData и putImageData и итерацию броска каждого пикселя, чтобы проверить значения rgba и изменить их

Ответ 8

Команды html2Canvas и ngxcharts, кажется, закрыли ошибки в этой проблеме, не предоставив никакого решения. Настройка свойства fill для rect через классы css не сработала.

Вот как я решил эту проблему, как ни странно, это работает:

 let rectElements = Array.from(document.getElementsByTagName('rect'));
  if (rectElements.length > 0) {
    rectElements.forEach(rect => {
      rect.setAttribute('fill', '#ffffff');
    });
  }