Html 到画布背景颜色换行不正确

Question

我正在使用 html2canvas.js 0.4.1 将 DOM 转换为画布以进行打印。当文本在 span 上有背景颜色，并且 span 换行到下一行时，画布版本会覆盖 2 行换行的整个矩形。它不仅涵盖文本。此外，它隐藏了先前跨度中的文本。

下面的小提琴很好地展示了它。 “一”跨度完全被“二二”跨度上的蓝色背景覆盖。

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 无法判断 span 的边界框是什么，或者它只是不支持多个矩形作为边界。

我可以在 HTML 文本上使用任何类型的 CSS 效果来在 html2canvas 中正确呈现吗？它不必是背景颜色，但我必须以某种方式表明环绕跨度已突出显示。

Answer 1

Canvas 不支持多行内嵌文本。因此，您的库将其拆分，但包装 .select 框的尺寸类似于 inline-block 元素。

您需要使用单独的跨度拆分和包装每个突出显示的单词。

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/
我什至更新了@Kaiidos 改进的你的小提琴：https://jsfiddle.net/sddah9k2/6/（我主要从事那个）

Answer 2

我已经接受了 Seika85 的回答，因为他是第一个。这是我最终得到的，保留原始跨度并为每个“选择”跨度执行此操作：

链接： 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;  
}