blocks|key|138365|text|问题是HTML2Canvas不能正确支持svg文件(在https://github.com/niklasvh/html2canvas/issues/95处有更多解释)。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|138366|如果您仍然需要HTML2Canvas，另一种方法是首先将SVG转换为Canvas+(canvg.js可以做到这一点)，然后对其使用HTML2Canvas，然后再将其还原。执行此操作的代码示例可以在上面的链接中找到。|138367|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/niklasvh/html2canvas/issues/95^0|R|1D|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]]|C|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]]]

Issue is that HTML2Canvas does not properly support svg files (more explanation here <a href="https://github.com/niklasvh/html2canvas/issues/95" rel="nofollow">https://github.com/niklasvh/html2canvas/issues/95</a>). 

An alternative you can do if you still need HTML2Canvas is to convert the SVG to Canvas first (canvg.js does this) then use HTML2Canvas on that, then revert it back. An example of the code that does this can be found on the link above.

blocks|key|2706696|text|我没有找到一个干净的方法来修复它。所以我想出了以下几点，需要调整来表示你的应用程序，但工作起来像个魔法师。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2706697|//+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:+'+%2B+offset.top+%2B+'px;+left:+'+%2B+parseInt(offset.left+-+parseInt((($(window).width()+/+2)+-+512)))+%2B+'px;">'+%2B+$(this)[0].textContent+%2B+'');

++++//+Remove+the+SVG+text
++++$(this)[0].textContent+=+'';

})|code-block|syntax|javascript|2706698|基本上，只需将任何文本元素替换为P元素和svg文本的上下文，并根据文本偏移量对其进行定位。只需在body标记之前创建P元素，并使其成为绝对元素。(我将它们放在包装器内的div中，这就是-512等的原因，你可以忽略它)|2706699|之前：|2706700|📷|atomic|offset|length|2706701|​|2706702|之后：|2706703|2706704|2706705|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/1067cae29ad4e834a1e4ca26f39fcda1.png|imageAlt|1|https://ask.qcloudimg.com/http-save/yehe-900000/32ce4ef16ef86897407eeed30fe144d1.png^0|0|0|0|0|0|1|0|0|0|0|0|1|1|0|0^^$0|@$1|2|3|4|5|6|7|16|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|17|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|18|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|19|8|@]|9|@]|A|$]]|$1|K|3|L|5|M|7|1A|8|@]|9|@$N|1B|O|1C|1|1D]]|A|$]]|$1|P|3|Q|5|6|7|1E|8|@]|9|@]|A|$]]|$1|R|3|S|5|6|7|1F|8|@]|9|@]|A|$]]|$1|T|3|L|5|M|7|1G|8|@]|9|@$N|1H|O|1I|1|1J]]|A|$]]|$1|U|3|Q|5|6|7|1K|8|@]|9|@]|A|$]]|$1|V|3|-4|5|6|7|1L|8|@]|9|@]|A|$]]]|W|$X|$5|Y|Z|10|A|$11|12|13|-4]]|14|$5|Y|Z|10|A|$11|15|13|-4]]]]

I didn't find a clean way to fix it. So I came up with the following, will need tweaking to represent your application but works like a charm.

<pre><code>// 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('&lt;p class="app-svg-text-replace" style="top: ' + offset.top + 'px; left: ' + parseInt(offset.left - parseInt((($(window).width() / 2) - 512))) + 'px;"&gt;' + $(this)[0].textContent + '&lt;/p&gt;');

 // Remove the SVG text
 $(this)[0].textContent = '';

})
</code></pre>

Basically just replaces any TEXT element with a P element and the context of the svg texts, and positions it based on the TEXT offsets. Just create the P elements before the body tag and make them absolute. (I am putting them in a divs inside a wrapper that's why there is -512 etc, you can ignore that)

Before:
<img src="https://i.stack.imgur.com/711VI.png" alt="enter image description here">

After:
<img src="https://i.stack.imgur.com/4TO0V.png" alt="enter image description here">

blocks|key|136087|text|根据您的目标，您可能不再需要HTML2Canvas来将SVG绘制到画布上。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|136088|至少在Chrome中，现在可以将特定的SVG直接绘制到画布上。使用您的示例：|136089|$(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%2Bxml;charset=utf-8,"%2Bxml;

++++++++ctx.drawImage(img,+0,+0);

++++});
});|code-block|syntax|javascript|136090|http://jsfiddle.net/ncv56vwf/4/|offset|length|136091|136092|在火狐和IE11中可能需要更多的工作，但这是可能的。下面是一个适用于Chrome、Firefox和IE11的示例：|136093|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"|136094|http://codepen.io/simonsarris/pen/rVOjby|136095|要让它在firefox中工作，必须设置SVG的width和height属性。|style|CODE|136096|为了让它在IE11中工作，您必须使用drawImage的所有参数|136097|entityMap|0|LINK|mutability|MUTABLE|url|1^0|0|0|0|0|V|0|0|0|0|0|0|14|1|0|N|5|T|6|0|I|9|0^^$0|@$1|2|3|4|5|6|7|17|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|18|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|19|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|1A|8|@]|9|@$K|1B|L|1C|1|1D]]|A|$]]|$1|M|3|-4|5|6|7|1E|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|1F|8|@]|9|@]|A|$]]|$1|P|3|Q|5|F|7|1G|8|@]|9|@]|A|$G|H]]|$1|R|3|S|5|6|7|1H|8|@]|9|@$K|1I|L|1J|1|1K]]|A|$]]|$1|T|3|U|5|6|7|1L|8|@$K|1M|L|1N|V|W]|$K|1O|L|1P|V|W]]|9|@]|A|$]]|$1|X|3|Y|5|6|7|1Q|8|@$K|1R|L|1S|V|W]]|9|@]|A|$]]|$1|Z|3|-4|5|6|7|1T|8|@]|9|@]|A|$]]]|10|$11|$5|12|13|14|A|$15|J]]|16|$5|12|13|14|A|$15|S]]]]

Depending on what you're targeting you may no longer need HTML2Canvas in order to paint SVG onto a canvas.

In at least Chrome it is possible to draw that particular SVG directly onto a canvas now. Using your example:

<pre><code>$(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);

 });
});
</code></pre>

<a href="http://jsfiddle.net/ncv56vwf/4/" rel="nofollow">http://jsfiddle.net/ncv56vwf/4/</a>

<hr>

It may take a bit more work in Firefox and IE11, but it is possible. Here's an example that works in Chrome, Firefox, and IE11:

<pre><code>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"
</code></pre>

<a href="http://codepen.io/simonsarris/pen/rVOjby" rel="nofollow">http://codepen.io/simonsarris/pen/rVOjby</a>

For it to work in firefox the SVG must have its <code>width</code> and <code>height</code> attributes set.

For it to work in IE11 you MUST use all arguments to <code>drawImage</code>

blocks|key|138426|text|我发现基本上Unicode+(Lucida+Sans+Unicode)字体在chrome中与HTML2Canvas不能正常工作，而且其他东西都支持字体大小，有小，小，大，大等…虽然这个信息不能解决你当前的问题，但是如果你有可能替换这些东西，那么你也许可以避免这个问题|type|unstyled|depth|inlineStyleRanges|entityRanges|data|138427|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

What I have found is basically Unicode (Lucida Sans Unicode) font is not properly working with HTML2Canvas in chrome, and other thing is supported font-Size for this are small, smaller, large, larger etc... though this info doesn't solve your current problem, but if it is possible for you to replace these things then you might be able to avoid this problem

blocks|key|139341|text|IDK到底是什么不起作用，但我想，它是HTML2Canvas库。因为，当我删除字体大小的样式属性时，一切都变得正常了：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|139342|<text+x="162"+text-anchor="middle"+class="highcharts-title"+zindex="4"
+style="color:#333333;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>|code-block|syntax|javascript|139343|这一条工作得很完美：|139344|<text+x="162"+text-anchor="middle"+class="highcharts-title"+zindex="4"+style=""+y="25">Inventory</text>|139345|LOL|139346|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

IDK what exactly does not work, but I suppose, that it is HTML2Canvas library. Becase, when I remove font-size style proprerty, all became ok:

<pre><code>&lt;text x="162" text-anchor="middle" class="highcharts-title" zindex="4"
 style="color:#333333;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"&gt;Inventory&lt;/text&gt;
</code></pre>

And this one work perfect:

<pre><code>&lt;text x="162" text-anchor="middle" class="highcharts-title" zindex="4" style="" y="25"&gt;Inventory&lt;/text&gt;
</code></pre>

lol

blocks|key|2706775|text|你必须下载字体。你可以在你的css中使用@import，你可以在下面的小提琴中看到：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2706776|http://jsfiddle.net/scraaappy/04wkvweo/或@font-face+(未测试)，或者通过在标题中添加<link+rel="stylesheet"+type="text/css"+href="http://fonts.googleapis.com/css?family=Tangerine">来使用google+font+api+(橘色作为示例，但这里是您想要的任何字体：https://www.google.com/fonts/+(不幸的是，没有Lucida+Grande)+)|2706777|@degr+:如果你只是删除Lucida+Grande，它将会工作，因为你的浏览器支持其他指定的字体，而Lucida+Grande不支持(这是windows上的google+chrome的情况)。Html2canvas只能处理你的默认字体，否则你必须下载它们。这就是为什么如果你没有指定任何字体或者如果你只指定了你的浏览器支持的字体，它就会起作用。|2706778|要查看浏览器支持的字体，只需调整设置，在默认字体和编码中的某处，您有一个列表框，其中包含所有支持的字体的列表，让您选择想要显示的默认字体(或者您可以像这里建议的那样使用javascript：list+every+font+a+user's+browser+can+display)所有列出的字体都将正常工作。如果不是，你必须使用上面的技巧|2706779|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/scraaappy/04wkvweo/|1|https://www.google.com/fonts/|2|https://stackoverflow.com/questions/3368837/list-every-font-a-users-browser-can-display^0|K|7|0|14|A|1W|2M|0|13|0|5M|T|1|0|0|2N|18|2|0^^$0|@$1|2|3|4|5|6|7|X|8|@$9|Y|A|Z|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|10|8|@$9|11|A|12|B|C]|$9|13|A|14|B|C]]|D|@$9|15|A|16|1|17]|$9|18|A|19|1|1A]]|E|$]]|$1|H|3|I|5|6|7|1B|8|@]|D|@]|E|$]]|$1|J|3|K|5|6|7|1C|8|@]|D|@$9|1D|A|1E|1|1F]]|E|$]]|$1|L|3|-4|5|6|7|1G|8|@]|D|@]|E|$]]]|M|$N|$5|O|P|Q|E|$R|S]]|T|$5|O|P|Q|E|$R|U]]|V|$5|O|P|Q|E|$R|W]]]]

you have to download the font. You can use <code>@import</code> in your css as you can see in this fiddle : 
 <a href="http://jsfiddle.net/scraaappy/04wkvweo/" rel="nofollow noreferrer">http://jsfiddle.net/scraaappy/04wkvweo/</a> or <code>@font-face</code> (not tested), or use google font api by adding &lt;<code>link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine"&gt;</code> in your header (Tangerine as sample, but any font you want here : <a href="https://www.google.com/fonts/" rel="nofollow noreferrer">https://www.google.com/fonts/</a> (unfortunately, no Lucida Grande) 

@degr : If you just remove Lucida Grande, it will work because other fonts specified are supported by your browser whereas Lucida Grande is not (this the case for google chrome on windows). Html2canvas can only deal with your default font, otherwise you have to download them. That's why it works if you don't specified any font or if you specified only fonts supported by your browser. 

To see fonts supported by your browser, just adjust settings and somewhere in default fonts and encoding, you have a list box containing the list of all font supported which let you choose the default font you want to be displayed (or you can play with javascript as it's suggested here: <a href="https://stackoverflow.com/questions/3368837/list-every-font-a-users-browser-can-display">list every font a user&#39;s browser can display</a>)
All the fonts listed will work. If not you have to use the trick above

blocks|key|136170|text|由生成两次文本元素的html2canvas中的an+issue引起。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|136171|在html2canvas发行版中包含this+pull+request之前，请应用此修补程序进行修复：|136172|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));
};|code-block|syntax|javascript|136173|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/niklasvh/html2canvas/issues/541|1|https://github.com/niklasvh/html2canvas/pull/616^0|N|8|0|0|I|H|1|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|6|7|Y|8|@]|9|@$A|Z|B|10|1|11]]|C|$]]|$1|F|3|G|5|H|7|12|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|13|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]|S|$5|N|O|P|C|$Q|T]]]]

Caused by <a href="https://github.com/niklasvh/html2canvas/issues/541" rel="noreferrer">an issue</a> in html2canvas generating the text elements twice.

Apply this patch to fix until <a href="https://github.com/niklasvh/html2canvas/pull/616" rel="noreferrer">this pull request</a> is incorporated in a html2canvas release:

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

Here is mycode and link to <a href="http://jsfiddle.net/vigneshncc/ncv56vwf/" rel="noreferrer">JSFiddle</a>. 

HTML

<pre><code>&lt;input type="button" id="export" value="Export"/&gt;
 &lt;svg xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"&gt;

&lt;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"&gt;Inventory&lt;/text&gt;
&lt;/svg&gt;
</code></pre>

JS

<pre><code>$(document).ready(function(){
 $('#export').on('click', function() { 
 html2canvas(document.body, {
 onrendered: function(canvas) {
 document.body.appendChild(canvas);
 },
 });
 });
});
</code></pre>

I'm trying to convert an svg to canvas image using html2canvas library. In the example I'm just appending the canvas image to the output. You can clearly see that the text is multiplied. Could anyone advice me to solve this issue.

Hope my question is clear. Thanks in advance.

SVG Text attribute is doubling - HTML2CANVAS

下面是我的代码和的链接。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...

问SVG文本属性加倍- HTML2CANVAS
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问SVG文本属性加倍- HTML2CANVASEN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问SVG文本属性加倍- HTML2CANVAS
EN