Html 到 canvas 背景色换行不正确

Question

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

下面的 fiddle 很好地证明了这一点。 'one one' 跨度完全被 'two two' 跨度上的蓝色背景覆盖。

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

Canvas 不支持多行内联文本。因此，您的库将其拆分，但包装 .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');

我为您更新了 fiddle：https://jsfiddle.net/sddah9k2/7/
我什至更新了 s improved fiddle of yours: https://jsfiddle.net/sddah9k2/6/（我主要致力于那个）

Answer 2

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

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

Html 到 canvas 背景色换行不正确

Html to canvas background color wraps incorrectly

html

css

canvas

html2canvas