конвертировать встроенные SVG в изображение или холст (цель - захват экрана о выбранном контейнере div)

Question

Извините за мой английский.

Я хочу нарисовать диаграмму с 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 генерировать SVG в html, а не файл, поэтому я не могу использовать svgeezy. Я пытаюсь использовать canvg, но я не могу (плохая документация).

Мне нужно решение на стороне клиента или что-то более простое серверное решение.

Пример кода для jsPlumb: http://jsfiddle.net/WRUra/3/ Вы просто подключаете div1 к div2 или div3 контейнеру и элемент соединителя, отображаемый в svg.

С уважением, Zserrbo

Answer 1

Если вы используете режим брезентовый соединения можно легко скопировать на другой холст.

• сделать большой холст скопировать все холст соединение с холстом в нужном месте
• для каждых див измерить его сверху, слева, ширину, высоту, и получить внутренний текст
• рисовать прямоугольники на большой холст
• Жеребьевка текст внутри прямоугольников
• экспорт большой холст с изображением