html2canvas 在 Safari 中不能很好地包装文本

Question

html2canvas 似乎无法正确处理 Safari 的换行文本（至少 Catalina 和 iOS 13.3.1），而它在 Chrome 和 Firefox 下工作正常.

$('#capture').css('color', 'blue');
html2canvas($('#capture')[0], {}).then(function(canvas) {
    $('#capture').css('color', 'red');
     $('#capture').append(canvas);
   });

这里有一个 jsFiddle 显示了问题。我试过指定更大的 canvas 大小、缩放比例、填充和边距，将 scrollX 和 scrollY 设置为零，以及传闻中的 letterRendering，但我没有成功。我做错了什么，这是一个有解决方法的错误，还是我只是卡住了？

（这可能是与 Words are overlapping when rendering the canvas 相同的问题，但我没有足够的声誉来评论这个问题，看来我不应该添加我的信息作为答案，因为它不是答案。我应该如何处理这个问题？）

Answer 1

根据我上面的评论，这似乎是 Safari 处理 getClientBoundingRect 的错误，已在 "Safari Technology Preview Release 102 WebKit 15610.1.5.2".

中修复

在我看来，html2canvas 的函数 testRangeBounds 是为了检测 getClientBoundingRect 实现中的一些其他错误，如果有错误，请将 SUPPORT_RANGE_BOUNDS 设置为 false，这导致 parseTextBounds 处理文本换行而不依赖 getClientBoundingRect。作为变通方法，我将 testRangeBounds 更改为始终 return false。这解决了我在 Catalina Safari 和 iOS Safari 中的问题，并且它在 Chrome 中继续正常工作。我怀疑缺点是速度较慢，但我正在等待 html2canvas 的 github 网站上的回复。

html2canvas 在 Safari 中不能很好地包装文本

html2canvas not wrapping text well in Safari

safari

html2canvas