SVG Text属性加倍 – HTML2CANVAS
这是mycode和JSFiddle的链接。
HTML
Inventory JS
$(document).ready(function(){ $('#export').on('click', function() { html2canvas(document.body, { onrendered: function(canvas) { document.body.appendChild(canvas); }, }); }); });
我正在尝试使用html2canvas库将svg转换为canvas图像。 在示例中，我只是将canvas图像附加到输出。 您可以清楚地看到文本成倍增加。 任何人都可以建议我解决这个问题。
希望我的问题很清楚。 提前致谢。
由html2canvas中的问题引起两次生成文本元素。
应用此修补程序进行修复，直到此拉取请求合并到html2canvas版本中：
NodeParser.prototype.getChildren = function(parentContainer) { return flatten([].filter.call(parentContainer.node.childNodes, renderableNode).map(function(node) { var container = [node.nodeType === Node.TEXT_NODE && !(node.parentNode instanceof SVGElement) ? 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)); };
我没有找到一个干净的方法来解决它。 所以我想出了以下内容，需要调整来代表你的应用程序，但就像一个魅力。
// Replace each SVG text with normal text $('text').each(function(){ // Get the offset var offset = $(this).offset(); // Create new text $(this).parents('[data-role="canvas"]').append('' + $(this)[0].textContent + '
'); // Remove the SVG text $(this)[0].textContent = ''; })
基本上只是将任何TEXT元素替换为P元素和svg文本的上下文，并根据TEXT偏移量对其进行定位。 只需在body标签之前创建P元素并使其成为绝对值。 （我把它们放在一个包装内的div中，这就是为什么有-512等，你可以忽略它）
之前： 
后： 
根据您的目标，您可能不再需要HTML2Canvas来将SVG绘制到canvas上。
至少在Chrome中，现在可以将特定的SVG直接绘制到canvas上。 使用你的例子：
$(document).ready(function () { $('#export').on('click', function () { // TODO var can = document.getElementById('canvas1'); var ctx = can.getContext('2d'); var img = new Image(); var svg = document.getElementById('aaa'); var xml = (new XMLSerializer).serializeToString(svg); img.src = "data:image/svg+xml;charset=utf-8,"+xml; ctx.drawImage(img, 0, 0); }); });
http://jsfiddle.net/ncv56vwf/4/
在Firefox和IE11中可能需要更多的工作，但它是可能的。 以下是适用于Chrome，Firefox和IE11的示例：
var can = document.getElementById('canvas1'); var ctx = can.getContext('2d'); var img = new Image(); img.onload = function() { ctx.drawImage(img, 0, 0, 600, 600, 0, 0, 600, 600) } img.src = "http://upload.wikimedia.org/wikipedia/commons/8/84/Example.svg"
http://codepen.io/simonsarris/pen/rVOjby
为了在Firefox中工作，SVG必须设置其width和height属性。
要使它在IE11中工作，你必须使用drawImage所有参数
IDK究竟什么不起作用，但我想，它是HTML2Canvas库。 但是，当我删除字体大小的样式时，一切都变好了：
Inventory
而这一个工作完美：
Inventory
大声笑
你必须下载字体。 你可以在这个小提琴中看到你的css中使用@import ：
http://jsfiddle.net/scraaappy/04wkvweo/或@font-face （未经测试），或通过添加< link rel=”stylesheet” type=”text/css” href=”http://fonts.googleapis.com/css?family=Tangerine”>使用google font api link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">作为示例，但您想要的任何字体： https ： //www.google.com/fonts/ （不幸的是，没有Lucida Grande）
@degr：如果你只是删除Lucida Grande，它会起作用，因为你的浏览器支持指定的其他字体而Lucida Grande不支持（这是windows上谷歌浏览器的情况）。 Html2canvas只能处理您的默认字体，否则您必须下载它们。 这就是为什么它没有指定任何字体或只指定浏览器支持的字体的原因。
要查看浏览器支持的字体，只需调整设置以及默认字体和编码中的某个位置，您就会有一个列表框，其中包含所有支持的字体列表，您可以选择要显示的默认字体（或者您可以使用javascript播放）这里建议： 列出用户浏览器可以显示的每种字体 ）列出的所有字体都可以使用。 如果不是，你必须使用上面的技巧
我发现基本上是Unicode（Lucida Sans Unicode）字体在Chrome中没有正确使用HTML2Canvas，而其他东西是支持font-Size这个是小，小，大，大等…虽然这个信息没有解决您当前的问题，但如果您可以替换这些东西，那么您可以避免这个问题
问题是HTML2Canvas不能正确支持svg文件（更多解释见https://github.com/niklasvh/html2canvas/issues/95 ）。
如果你仍然需要HTML2Canvas，你可以做的另一种方法是首先将SVG转换为Canvas（canvg.js这样做），然后在其上使用HTML2Canvas，然后将其还原。 可以在上面的链接中找到执行此操作的代码示例。