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

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

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

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

Uncaught TypeError: Object #<SVGSVGElement> has no method 'toDataURL'

Спасибо

Ответы

Ответ 1

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

(код адаптирован из: Преобразование 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");

Ответ 2

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

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

Ответ 3

Как отметил @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);
    }
}

Ответ 4

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

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

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