Question

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

以下小提琴演示得非常好。 “一个”跨度完全由“两个两个”跨度的蓝色背景覆盖。

的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无法分辨出跨度的边界框是什么，或者它可能只是不支持多个矩形作为边界。

我可以在html2canvas中正确呈现的HTML文本中使用任何类型的CSS效果吗？它不一定是背景颜色，但我必须以某种方式指示包装跨度突出显示。

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

我更新了你的小提琴：https://jsfiddle.net/sddah9k2/7/
我甚至更新了@Kaiido改进了你的小提琴：https://jsfiddle.net/sddah9k2/6/（我主要在那个上工作）

Answer 2

我已经接受了Seika85的答案，因为他是第一个。这是我最终得到的结果，保留原始范围，并为每个选择＆＃39;做到这一点。跨度：

链接： 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到画布背景颜色包装不正确

2 个答案: