在 PHP 中裁剪图像 - html2Canvas 复制 Google 图表文本答案

【问题标题】：Cropping image in PHP - html2Canvas duplicates Google Charts text在 PHP 中裁剪图像 - html2Canvas 复制 Google 图表文本
【发布时间】：2016-03-08 22:45:17
【问题描述】：

我一直在使用html2Canvas 将 Google 图表转换为图像，以便以后可以将此图像附加到电子邮件中。但是，html2Canvas 似乎重复了我图表的标题，如下所示：

如 div 中所示的预期的正确图像：

转换后的图像，带有重复的标题，来自下面的javascript：

这是我的javascript 代码，用于将 div 转换为图像：

    var html = $('#chart_div').html();
    html2canvas($('#chart_div'), {
        onrendered: function( canvas ) {
            var img = canvas.toDataURL();
            $("#img-out").append(canvas);
        }
    });

我尝试了几种方法来裁剪图像，包括提供html2canvas 宽度和高度参数，但这会切断图像的底部和右侧，而不是顶部。我可以做些什么来（a）调整重复的标题并将顶部裁剪一些像素，或者（b）使其html2canvas正确呈现文本？任何帮助将不胜感激。

【问题讨论】：

标签： javascript php jquery html2canvas

【解决方案1】：

我也遇到了同样的问题，我在这里找到了解决方案： https://github.com/niklasvh/html2canvas/issues/541

简而言之，这个想法是用以下内容替换 NodeParser.prototype.getChildren 方法（html2canvas.js 源文件中的第 2070 到 2075 行，用于版本 0.5.0-alpha1）：

NodeParser.prototype.getChildren = function(parentContainer) {
    return flatten([].filter.call(parentContainer.node.childNodes, renderableNode).map(function(node) {
        var container = [node.nodeType === Node.TEXT_NODE && node.parentElement.tagName !== "text" ? new TextContainer(node, parentContainer) : new NodeContainer(node, parentContainer)].filter(nonIgnoredElement);
        return node.nodeType === Node.ELEMENT_NODE && container.length && node.tagName !== "TEXTAREA" ? (container[0].isElementVisible() ? container.concat(this.getChildren(container[0])) : []) : container;
    }, this));
};

除非我弄错了，否则这个“修复”并没有包含在主版本中，所以它可能会产生副作用，但就我而言，它确实起到了作用。

希望有帮助！

【讨论】：