Html Leinwand Hintergrundfarbe wraps falsch

Question

Ich benutze html2canvas.js 0.4.1, um ein DOM zu Leinwand für den Druck zu konvertieren. Wenn der Text in einer Spanne eine Hintergrundfarbe hat und die Spanne in die nächste Zeile springt, deckt die Canvas-Version das gesamte Rechteck der beiden Umbruchlinien ab. Es deckt nicht nur den Text ab. Darüber hinaus verbirgt es den Text in der vorherigen Spanne.

Die folgende Geige demonstriert es ziemlich gut. Die Ein-Mann-Spanne ist vollständig durch den blauen Hintergrund auf der Zwei-Zwei-Spanne abgedeckt.

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> 

Code:

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); 
      } 
     }); 

Meine Theorie ist, kann html2canvas nicht sagen, was den Begrenzungsrahmen der Spannweiten sind, oder vielleicht unterstützt es nicht mehrere Rechtecke als Grenzen.

Gibt es irgendeine Art von CSS-Effekt, den ich für den HTML-Text verwenden kann, der in html2canvas korrekt gerendert wird? Es muss keine Hintergrundfarbe sein, aber ich muss irgendwie angeben, dass die Umbruchspanne hervorgehoben ist.

Answer 1

Canvas unterstützt keine mehrzeiligen Inline-Texte. So teilen Ihre Bibliotheken es auf, aber die Verpackung .select Box erhält die Dimensionen wie ein Inline-Block-Element.

Sie müssen jedes hervorgehobene Wort trennen und umbrechen.

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'); 

ich Ihnen für die Geige aktualisiert: https://jsfiddle.net/sddah9k2/7/
ich auch @Kaiido s verbesserte Geige von Ihnen aktualisiert: https://jsfiddle.net/sddah9k2/6/ (arbeitete ich in erster Linie auf, dass man)

Answer 2

ich schon akzeptierte Seika85 Antwort, da seine erste war. Hier ist, was ich am Ende mit der ursprünglichen Spanne zu halten und dies auch für jeden zu tun 'wählen' Spannweite:

Link: https://jsfiddle.net/sddah9k2/9/

js:

// 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; 
}