问题标签 [canvg]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
243 浏览

javascript - canvg 使用 xmlns 在 svg 上失败

我正在使用canvg将以下 svg 渲染到画布但是它失败了。我不知道为什么

我的猜测是它必须与xmlns做一些事情。我在canvg网页上找不到任何关于它的信息。任何帮助将不胜感激。

这是canvg似乎失败的屏幕截图 这里点和角度未定义

0 投票
1 回答
2505 浏览

javascript - s.substr 不是函数

我正在使用canvg,但是当我运行它时:

我在控制台中得到这个

canvg.js:58 未捕获类型错误:s.substr 不是函数

这是一个jsFiddle

0 投票
0 回答
290 浏览

javascript - canvas.toDataUrl 的问题:当画布包含带有 base64 数据的标签图像时出错

我正在使用此函数将 svg 转换为 jpeg(它包括 canvg):

先前生成的 SVG 图像中的 SVG 变量。现在,它可以正常工作,但是,如果 SVG 包含带有 base64 格式的 href 的标签:

结果是空白。我试图检查生成的画布(在它被删除之前)并且很好,但由于某种原因 canvas.toDataURL 在这种情况下似乎不起作用。

有什么线索吗?

谢谢丹尼尔

0 投票
1 回答
589 浏览

javascript - canvg 在 Edge 中不起作用

我正在使用canvg截取 svg 内容的网页截图。在ChromeOperaIE11中,它似乎工作正常,但在Edge浏览器中,它只是奇怪地呈现黑色背景,画布上没有任何内容。 在 Edge 浏览器中试一下

打开上面的链接并尝试以下示例 1) 足球 2) 平面图

我无法找到问题所在。显然,canvg 不支持 Edge。我希望有人已经找到了解决方案。这将是一个很大的帮助!

0 投票
0 回答
406 浏览

javascript - 如何使用canvg将气泡图的svg转换为png?

我如何使用canvg库将气泡图转换为png?我用 highcharts 库绘制了一个气泡图。当我使用canvg并保存到png时,我看到一个空的png。

空图像

0 投票
1 回答
3297 浏览

javascript - 将 SVG 分享到 Facebook

用户自定义 SVG,当他们满意时,我想给他们在 Facebook 上分享图像的选项。

我知道 Facebook 不接受 SVG,所以,在阅读了这个问题之后,我想出了以下使用canvg

.toDataURL尽管,的命名img不是一个 URL(至少,我不认为它是),而是一个大于 10,000 个字符的字符串,与data:image/png;base64,....

如果我然后尝试允许用户在 Facebook 上分享 PNG,

我得到的错误消息是“参数href”是必需的(我清楚地提供了......也许img太长并且JSON被截断了?),虽然我也看到我没有提供有效的URL为picture.

如何在 Facebook 上分享图像数据?

如果无法使用 PNG 的原始 base 64 编码来执行此操作,我不反对将 PNG 文件临时存储在服务器上。但是,理想情况下,我只会存储 24 小时、几个月或一小段时间,然后能够在用户帖子不消失的情况下将其删除。那可能吗?

0 投票
0 回答
1847 浏览

javascript - jsPDF:如何正确地将 HTML + SVG 渲染为 PDF(使用 html2pdf.js 和 canvg.js)?

Treant.js 图表

我正在使用Treant.js javascript 库创建组织结构图,并使用 jsPDF(连同 html2pdf.js 和 canvg.js)将图表转换为 PDF。将 SVG 元素(连接框的线)和 HTML 内容(框)转换为 PDF,我使用以下代码:

如您所见,我使用 html2pdf.js 将 html 转换为 pdf,并使用 canvg.js 将 svg 转换为画布。下面是我得到的输出:

Treant.js 图表 jsPDF 渲染

这方面的问题是:

  • SVG 未与 HTML 对齐。
  • pdf 中的字体小于其 HTML 对应字体。
  • PDF中奇怪的字间距。

我希望 SVG 与 HTML 保持一致。我希望字体能够正确呈现(我忽略了字体样式,因为我在我的 html 中使用了谷歌字体并且它在 PDF 中不受支持)。

是否有任何可用的修复程序可以正确地将 SVG + HTML 渲染为 PDF?

0 投票
1 回答
258 浏览

javascript - 重叠 tspan 的 canvg() 问题

我需要将 svg 元素转换为 png。在转换为 png 时,文本会重叠并且无法正确对齐。

实际图像是这样的: 在此处输入图像描述

转换后的图像是这样的:

在此处输入图像描述

代码是这样的:

//这段代码在svg元素下

//------------------------------------------------ -------------------------------------------------- -----------------------------------------

//这是我用来将svg转换为png的代码:

0 投票
1 回答
567 浏览

canvas - canvg drawSvg() 无法正确定位 svg

我有这个svg

我想在画布上的同一位置在画布上绘制这个 svg

我正在使用 canvg 库

我为此创建了一个小提琴

这清楚地表明源 svg 在画布上绘制时应该达到相同的位置,但事实并非如此。

即使在 drawingContext.drawSvg() 方法中使用的坐标与源 svg 相同,它也被绘制在错误的位置。

我尝试了很多策略,但都没有奏效。请提出一个可行的解决方案来解决这个问题。

0 投票
1 回答
223 浏览

javascript - 使用 JavaScript 查找 CSS 属性的浏览器默认值

是否可以使用 JS 检索 CSS 属性的浏览器默认值,忽略任何内联/导入的样式?

一些上下文:我正在使用 JS 内联特定 SVG 元素及其子元素的所有样式(这允许我使用canvg将其转换为 PNG )。目前,我的输出对于每种可用的样式都非常臃肿,我希望能够从包含在内的样式数组中丢弃任何使用浏览器默认值的属性。

正在发生的事情的演示:

如您所见,即使对于简单的 SVG,此过程也会添加大量不必要的数据。