Неверный цвет обложки Html to canvas

Question

Я использую html2canvas.js 0.4.1 для преобразования DOM в холст для печати. Когда текст имеет цвет фона на пролете, а span охватывает следующую строку, то версия холста охватывает весь прямоугольник из двух линий обертывания. Он не просто охватывает текст. Кроме того, он скрывает текст в предыдущем интервале.

Следующая скрипка демонстрирует это довольно хорошо. Пробел «один» полностью покрыт синим фоном на «двух двух» диапазонах.

https://jsfiddle.net/sddah9k2/1/

CSS:

#content { 
    width:200px; 
} 
.select { 
    background-color:#3efcdb 
} 

HTML:

<div id='content'> 
<span >one one one one one one </span> 
<span class="select" >two two two two two two </span> 
<span >three three three three three </span> 
</div> 

<div id="img-out"></div> 

код:

html2canvas($("#content"), { 
      onrendered: function(canvas) { 
       theCanvas = canvas; 
       document.body.appendChild(canvas); 

       // Convert and download as image 
       Canvas2Image.saveAsPNG(canvas); 
       $("#img-out").append(canvas); 
       // Clean up 
       //document.body.removeChild(canvas); 
      } 
     }); 

Моя теория html2canvas не может сказать, что такое прямоугольник от промежутков, или, может быть, он просто не поддерживает несколько прямоугольников в качестве границ.

Есть ли какой-либо эффект CSS, который я могу использовать в тексте HTML, который будет правильно отображаться в html2canvas? Это не должно быть цвет фона, но я должен как-то указать, что диапазон обтекания выделен.

Answer 1

Холст не поддерживает многострочные текстовые строки. Таким образом, ваши библиотеки разбивают его, но поле обертывания .select получает такие размеры, как элемент встроенного блока.

Вам нужно разделить и обернуть каждое выделенное слово отдельным сегментом.

JS:

var $selected = $('#content.notupdated .select'); 
$selected.each(function() { 
    var $this = $(this); 
    var words = $this.text().split(" "); 
    $this.empty(); 
    $.each(words, function(i, v) { 
     $this.append($("<span>").text(v + ' ')); 
    }); 
}); 
$('#content.notupdated').removeClass('notupdated').addClass('updated'); 

Я обновил вы скрипку, что: https://jsfiddle.net/sddah9k2/7/
Я даже обновил @Kaiido сек усовершенствованную скрипку ваш: https://jsfiddle.net/sddah9k2/6/ (я работал в основном на том, что один)

Answer 2

Я уже принял Seika85, поскольку он был первым. Вот то, что я закончил с, сохраняя при этом оригинальный срок, а также делать это для каждого 'выберите' продолжительность:

ссылка: https://jsfiddle.net/sddah9k2/9/

ЯШ:

// Get all the select spans 
$('span.select').each(function (ix, block) { 
    // split the text spans on word so it wraps in the same place 
    var txtar = $(block).text().split(' '); 

    // Remove the class on the outer span, but keep it intact. 
    $(block).removeClass('select'); 
    $(block).html(''); // empty it 
    // Replace each word. Note the space before closing span! 
    $(txtar).each(function (ix, txt) { 
     $(block).append($('<span class="bg">'+txt+' </span>')); 
    }); 
}); 

CSS:

.select { 
    background-color:#3efcdb; 
} 
.bg { 
    background-color:#3efcdb; 
}