Html2canvas: Chrome / Chromium中的字母间距异常

创建于 2017-11-19 · 25评论 · 资料来源: niklasvh/html2canvas

致电时：

html2canvas(document.getElementsByClassName('console'), {
      onrendered: function(canvas) {
        var img = canvas.toDataURL()
        var iframe = '<iframe src="' + img + '" frameborder="0" style="border:0; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%;" allowfullscreen></iframe>'
        var x = window.open();
        x.document.open();
        x.document.write(iframe);
        x.document.close();
      },
      letterRendering: true,
    });

不论是否带有letterRendering ，Chrome都会输出以下内容：

html2canvasbug

在Firefox中的输出为：

screenshot-2017-11-19 http localhost

它为何如此渲染有任何特定的原因？

Bug

资料来源

christopherkade

👍2

最有用的评论

我也通过转到要截图的div来解决此问题，然后设置“ font-variant: normal; ”，这对我很有用，希望对您有所帮助。

maaoui 于 2019-02-13

👍3

所有25条评论

字母间距（在这种情况下为单词间距）实际上看起来是正确的，但看起来不正确的是字体系列。您正在使用哪个版本的html2canvas？您可以在jsfiddle上复制该问题吗？

编辑：使用letterRendering时，它应呈现与您提到的不同的外观。

niklasvh 于 2017-11-22

感谢您的回复，

我正在使用0.5.0-beta4 。

您的工作间隔看起来正确是什么意思？您是指我分享的第一张照片吗？字体会在单词之间产生这样的间距吗？

请注意，我将CodeMirror用于呈现的文本编辑器，特别是Angular包装器： ng2-codemirror 。

我试图在这里无济于事。

christopherkade 于 2017-11-22

我也在firefox和chrome中发现了同样的问题。如果您在文本上使用字母间距的css规则，它将使文本在每个单词之间留有很大的空隙。在0.4.1版本中不是这种情况，它曾经可以完美地呈现文本，但是缺少伪元素（：before：after）

LinkTree3 于 2017-11-23

删除letter-spacing规则后，一切恢复正常吗？我既不在组件的css中也不在自定义code-mirror的css文件中使用它。

christopherkade 于 2017-11-23

是从CSS删除字母间距规则后，问题消失了。单词之间没有大的空格。这是页面间距中字母间隔部分的渲染中的某种东西。

LinkTree3 于 2017-11-23

更新！我只是从master的最新资源构建的库，它运行良好。到目前为止，一切看起来都很不错。以前，我尝试使用v0.5.0-beta4版本。

编辑：在firefox上发现1个问题。当背景图像没有被剪切到文本时
-webkit-background-clip：文本；
-webkit-text-fill-color：透明；
被使用。
虽然在chrome中效果很好。

LinkTree3 于 2017-11-23

我没有在CSS中使用任何letter-spacing属性，但问题仍然存在。我正在使用v0.5.0-beta4 。

christopherkade 于 2017-11-25

尝试从最新的主要资源进行构建。

LinkTree3 于 2017-11-25

完成，但这不能解决问题，显示保持不变。

christopherkade 于 2017-11-26

应该用https://github.com/niklasvh/html2canvas/commit/77d258f1d8eeccf7e38235463a293b512c1ca3d0修复

niklasvh 于 2017-12-12

似乎问题依旧存在：

screenshot_2017-12-18_09-56-43

这是我渲染元素的方式：

html2canvas(document.body).then(function(canvas) {      
      document.body.appendChild(canvas);
});

我已经下载了您提到的最新预发行版本，并替换了旧版本。

christopherkade 于 2017-12-18

如果设置选项letterRendering: true @ christopherkade会解决吗？

niklasvh 于 2017-12-24

不幸的是，这不是我的做法：

let element = document.getElementById('console');
const options = {
  letterRendering: true
};

html2canvas(element, options).then(function(canvas) {      
  document.body.appendChild(canvas);

  var url = canvas.toDataURL();
  var img = '<img src="' + url + '" style="border:0;"></img>'
  var x = window.open();
  x.document.open();
  x.document.write(img);
  x.document.close();
});

如果我尝试存储库中给出的示例，则结果相同。

christopherkade 于 2017-12-24

我找到了解决此问题的方法（而且不是很干净）：

// Package used to detect the browser used by the user
const browser = detect();
const element = document.getElementById('console');

// Set up my options
let options = {};
// For some reason foreignObjectRendering solves the spacing issue on Chrome but gives an error on Firefox, so I detect the browser and apply the adequate options.
if (browser && browser.name === 'chrome') {      
  options = {
    useCORS: true,
    foreignObjectRendering: true
  };  
}

// Open the canvas in a new window
html2canvas(element, options).then(function(canvas) {
  const url = canvas.toDataURL();
  const img = '<img src="' + url + '" style="border:0;"></img>'
  const x = window.open();
  x.document.open();
  x.document.write(img);
  x.document.close();
});

请注意，使用第二个选项时在Firefox上出现的错误如下：