将嵌入式svg转换为图像或画布(目标是关于所选div容器的捕获屏幕)

时间:2013-03-25 09:25:44

标签: javascript canvas svg jsplumb

抱歉我的英文。

我想用jsPlumb绘制图表并导出捕获的图像。

Jsplumb在svg中呈现如下:

<svg style="position:absolute;left:457.05px;top:227.65px;z-index:-5;" width="476.9" height="233.7" pointer-events="none" position="absolute" version="1.1" xmlns="http://www.w3.org/1999/xhtml" class="_jsPlumb_connector ent0 ent1 Line"><path d="M 112.95 178.35 L 363.95 55.35" pointer-events="all" version="1.1" xmlns="http://www.w3.org/1999/xhtml" style="" fill="none" stroke="black" stroke-width="5"/><path d="M 112.95 178.35 L 363.95 55.35" pointer-events="all" version="1.1" xmlns="http://www.w3.org/1999/xhtml" style="" fill="none" stroke="blue" stroke-width="3"/></svg>

我想将此转换为画布(我可以使用html2canvas转换为图像 - 我尝试这种方式:Google docs)或直接转换为图像。 jsPlumb在html中生成SVG而不是文件,所以我不能使用 svgeezy 。我尝试使用canvg,但我不能(糟糕的文档)。

我需要一个客户端解决方案或更简单的服务器端解决方案。

jsPlumb的示例代码:http://jsfiddle.net/WRUra/3/您只需将div1连接到div2或div3容器,并将连接器元素连接到svg。

此致,Zserrbo

1 个答案:

答案 0 :(得分:0)

如果使用画布模式,则可以轻松地将连接复制到另一个画布。

  • 制作一个大画布,将所有画布连接复制到画布中 正确的地方
  • 为每个div测量其顶部,左侧,宽度,高度和 获取内部文本
  • 在大画布上绘制矩形
  • 在矩形内绘制文字
  • 将大画布导出到图像