html2canvas没有样式,html2canvas没有抓住svg(html2canvas not grabbing svg)

html2canvas没有抓住svg(html2canvas not grabbing svg)

当我运行这个：

html2canvas(document.body, {

allowTaint: true,

onrendered: function(canvas) {

document.body.appendChild(canvas);

}

});

我把整个页面都抓到了画布上，但SVG却没有。 一直在环顾四周，但我找不到任何有用的解决方法，任何想法？

When I run this:

html2canvas(document.body, {

allowTaint: true,

onrendered: function(canvas) {

document.body.appendChild(canvas);

}

});

I have my whole page grabbed into a canvas, but the SVG isn't. Been looking around but I couldn't find anything helpful to solve it, any idea?

原文：https://stackoverflow.com/questions/43379058

更新时间：2020-07-27 06:07

最满意答案

我通过告诉传单提供瓷砖作为画布而不是svg 来解决它

jQuery("#print").on("click", function() {

myCapture();

});

function myCapture() {

html2canvas(document.body, {

allowTaint: true,

useCORS: true,

onrendered: function(canvas) {

document.body.appendChild(canvas);

}

});

}

var map = L.map('map', {

renderer: L.canvas()

});

I resolved it by telling leaflet to provide tiles as canvas and not as an svg

jQuery("#print").on("click", function() {

myCapture();

});

function myCapture() {

html2canvas(document.body, {

allowTaint: true,

useCORS: true,

onrendered: function(canvas) {

document.body.appendChild(canvas);

}

});

}

var map = L.map('map', {

renderer: L.canvas()

});

相关问答

SVG(可缩放矢量图形)编辑 可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集)，用于描述二维矢量图形的一种图形格式。它由万维网联盟制定，是一个开放标准。 中文名可缩放矢量图形 外文名Scalable Vector Graphics 外语缩写SVG 开发商万维网联盟 发行时间1999年 格 式矢量图 延伸至可扩展标记语言 类 型图形格式 目录

由于Angular2使用typescript，您需要安装该模块的typescript定义文件。 它可以从@types安装(如果存在)。 如果没有，您可以创建自己的定义文件并将其包含在项目中。 Since Angular2 uses typescript, you need to install the typescript definition files for that module. It can be installed from @types (if it exists). If it

...

您可能在css中设置htm2canvas无权访问的样式，因此不适用。 如果您将所有内容设置为svg的属性，它应该可以工作。 You're probably setting styles in css which htm2canvas doesn't have access to and therefore doesn't apply. If you set everything as attributes of the svg instead, it should work.

见维基百科： http : //en.wikipedia.org/wiki/Canvas_element SVG是浏览器中绘制形状的早期标准。 然而，SVG处于一个基本上更高的水平，因为每个绘制的形状被记住为场景图或DOM中的对象，随后将其呈现为位图。 这意味着如果SVG对象的属性更改，浏览器可以自动重新渲染场景。 在上面的例子中，一旦绘制了矩形，它被绘制的事实被系统所遗忘。 如果要更改其位置，则需要重绘整个场景，包括可能已被矩形覆盖的任何对象。 但是在等效的SVG案例中，可以简单地改变矩形的位置

...

看看html2canvas文档。 在那里，它说html2canvas被称为html2canvas(element, options) 所以你的新代码应该看起来像这样：

window.takeScreenShot = function () {

html2canvas(document.getElementById("masterslider"), {

onrendered: functi

...

我发现这个问题的根本原因是嵌入在图表内的另一个svg图标。 用png图像替换svg图标解决了这个问题。 抱歉给你带来不便。 希望它能帮助未来的人。 I found the root cause for this issue to be another svg icon which was embedded inside the chart. Replacing the svg icon with png image fixed this issue. Sorry for the inconveni

...

逻辑上，渲染适用于您选择的元素。 所以不会得到背景，除非你选择“父元素”或“根元素”。 我有两个解决方案： 1 -使用Javascript / Jquery，您可以从div＃target捕获X和Y位置，然后在div＃target中设置背景图像和背景位置X / Y位置 2 -使用html2canvas捕获

，然后使用canvas/javascript api通过X / Y位置裁剪图像和div＃target的宽度/高度，参见示例：＃242(注释)注意：设置width / height /

...

Ext不知道任何关于未定义为类系统一部分的类，你需要在html中使用脚本标记包含JS文件。 Ext doesn't know anything about classes not defined as part of it's class system, you need to include the JS file using a script tag in your html.

我通过告诉传单提供瓷砖作为画布而不是svg 来解决它 jQuery("#print").on("click", function() {

myCapture();

});

function myCapture() {

html2canvas(document.body, {

allowTaint: true,

useCORS: true,

onrendered: function(canvas) {

document.body.appendChil

...

我忘了回答这个问题了。所以我想到了我的问题。 实际上html2canvas正在转换为图像，但它并没有选择SVG的样式，因为它是在不同的css文件中编写的。所以如果你想在图像中获得SVG的样式，你必须在标签内给出样式内联 。然后你将得到完整的彩色图像。 希望这会帮助你。 I forgot to answer this question.Someone up vote my question so came into mind. Actually html2canvas is converting t

...