SVG文本属性加倍- HTML2CANVAS
下面是我的代码和JSFiddle的链接。
HTML
<input type="button" id="export" value="Export"/>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<text x="162" text-anchor="middle" class="highcharts-title" zindex="4" style="color:#333333;font-size:18px;font-weight:normal;text-decoration:normal;font-family:Lucida Grande,Lucida Sans Unicode, Arial, Helvetica, sans-serif;visibility:visible;fill:#333333;width:260px;" y="25">Inventory</text>
</svg>JS
$(document).ready(function(){
$('#export').on('click', function() {
html2canvas(document.body, {
onrendered: function(canvas) {
document.body.appendChild(canvas);
},
});
});
});我正在尝试使用html2canvas库将svg转换为画布图像。在本例中，我只是将画布图像添加到输出中。您可以清楚地看到文本是倍增的。有人能建议我解决这个问题吗？
希望我的问题是清楚的。提前谢谢。
回答 7
Stack Overflow用户
发布于 2015-08-12 18:26:30
由生成两次文本元素的html2canvas中的an issue引起。
在html2canvas发行版中包含this pull request之前，请应用此修补程序进行修复：
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));
};Stack Overflow用户
发布于 2015-05-04 22:19:48
我没有找到一个干净的方法来修复它。所以我想出了以下几点，需要调整来表示你的应用程序，但工作起来像个魔法师。
// 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('<p class="app-svg-text-replace" style="top: ' + offset.top + 'px; left: ' + parseInt(offset.left - parseInt((($(window).width() / 2) - 512))) + 'px;">' + $(this)[0].textContent + '</p>');
// Remove the SVG text
$(this)[0].textContent = '';
})基本上，只需将任何文本元素替换为P元素和svg文本的上下文，并根据文本偏移量对其进行定位。只需在body标记之前创建P元素，并使其成为绝对元素。(我将它们放在包装器内的div中，这就是-512等的原因，你可以忽略它)
之前：
之后：
Stack Overflow用户
发布于 2015-05-05 23:19:30
根据您的目标，您可能不再需要HTML2Canvas来将SVG绘制到画布上。
至少在Chrome中，现在可以将特定的SVG直接绘制到画布上。使用您的示例：
$(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/
在火狐和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的所有参数
https://stackoverflow.com/questions/29597242
复制相似问题