Как преобразовать / сохранить график d3.js в pdf / jpeg

Я работаю над клиентской / javascript функцией для сохранения или преобразования существующего графика D3-SVG в файл. Я много искал и нашел некоторые рекомендации, в основном используя canvas.toDataURL() .

У меня нет на моей странице и вместо этого используется: d3.select("body").append("svg").... Я также пытался добавить SVG в но ничего не происходит ,

Не могли бы вы помочь мне устранить это исключение:

 Uncaught TypeError: Object # has no method 'toDataURL' 

спасибо

Чтобы отобразить ваш SVG в canvasе, сначала нужно преобразовать его с помощью утилиты синтаксического анализатора / средства визуализации, например http://code.google.com/p/canvg/.

(код, адаптированный из: конвертировать SVG в изображение (JPEG, PNG и т. д.) в браузере , а не проверять)

 // the canvg call that takes the svg xml and converts it to a canvas canvg('canvas', $("#my-svg").html()); // the canvas calls to output a png var canvas = document.getElementById("canvas"); var img = canvas.toDataURL("image/png"); 

Только хедз-ап, что я превратил эту концепцию в небольшую библиотеку JavaScript: https://github.com/krunkosaurus/simg

Он просто преобразует любой SVG в изображение для замены или запуска загрузки. Идея взята здесь: http://techslides.com/save-svg-as-an-image/

Как отметил @Premasagar в этом комментарии по этому вопросу, преобразуйте SVG в изображение (JPEG, PNG и т. Д.) В браузере

Если borwser поддерживает SVG и canvas, вы можете использовать этот метод https://svgopen.org/2010/papers/62-From_SVG_to_Canvas_and_Back/index.html

 function importSVG(sourceSVG, targetCanvas) { // https://developer.mozilla.org/en/XMLSerializer svg_xml = (new XMLSerializer()).serializeToString(sourceSVG); var ctx = targetCanvas.getContext('2d'); // this is just a JavaScript (HTML) image var img = new Image(); // http://en.wikipedia.org/wiki/SVG#Native_support // https://developer.mozilla.org/en/DOM/window.btoa img.src = "data:image/svg+xml;base64," + btoa(svg_xml); img.onload = function() { // after this, Canvas' origin-clean is DIRTY ctx.drawImage(img, 0, 0); } } 

Библиотека Simg, созданная и предлагаемая Mauvis Ledford выше, отлично поработала над тем, чтобы мои svg-диаграммы, созданные с помощью Dimple, были загружены.

Однако мне нужно было изменить один аспект кода, чтобы он работал. Внутри прототипа toString () внутри цикла forEach (строка 37), если вы меняете «svg.setAttribute (..)» на «svg [0] .setAttribute», это облегчит «setAttribute (..)», а не функция “ошибка. Точно так же должно быть сделано прямо в инструкции return, добавив «[0]» после svg (строка 39).

Мне также пришлось вручную редактировать назначения «canvas.width» и «canvas.height» (строки 48 и 49) в прототипе toCanvas (), чтобы сделать загруженный образ более правильным (ранее он просто загружал статический квадрат 300×150 в верхнем левом углу диаграммы).

  • Волна (или форма?) С рамкой на CSS3
  • Экспорт графов Excel в виде файлов векторной графики (например, SVG)?
  • SVG: текст внутри прямоугольника
  • вертикальное выравнивание текстового элемента в SVG
  • Удаление преобразований в файлах SVG
  • Прозрачный полый или вырезанный круг
  • В чем разница между canvasом SVG и HTML5?
  • Можете ли вы контролировать, как нарисована ширина штриха SVG?
  • Рисуем SVG на canvasе HTML5 с поддержкой элемента font
  • img src SVG изменение цвета заливки
  • Как рассчитать SVG-путь для дуги (круга)
  • Давайте будем гением компьютера.