FLOT данные в виде изображения для записи в PDF - PullRequest
Новая
       21

FLOT данные в виде изображения для записи в PDF

5 голосов
/ 15 апреля 2010

Я использую jQuery / FLOT для рисования графика, я хотел бы, чтобы пользователь мог загрузить PDF-версию графика. Я пишу PDF, используя ColdFusion. После создания графа я затем отправляю html графа div через ajax в скрипт CF, который использует cfdocument для написания pdf. Проблема в том, что в PDF он отображает только ось и метки, а не фактические данные графика. Кто-нибудь знает способ получить фактическое изображение, которое динамически создается на холсте?

Ответы [ 4 ]

3 голосов
/ 03 февраля 2014

Вы можете отобразить диаграмму на сервере с помощью браузера без головы, например phantomJS (движок WebKit).

Вам нужен только сценарий, который берет URL-адрес и выводит вывод в виде строки в кодировке Base64 в поток консоли или записывает изображение.

Насколько я знаю, это единственный полу-независимый от браузера способ сделать это.

Вот скрипт для фантомов, который выводит данную веб-страницу в виде строки изображения в кодировке base64: 

var page = require('webpage').create();
var system = require('system');

var pageUrl = system.args[1];

page.viewportSize = { width: 1280, height: 720 };
page.open(pageUrl , function () {
    console.log(page.renderBase64('PNG'));
    phantom.exit();
});
2 голосов
/ 25 февраля 2011

Проверьте CutyCapt (http://cutycapt.sourceforge.net/),, похоже, работает с Flot.

2 голосов
/ 12 октября 2012

Вы также можете сделать снимок вашего canvas с помощью toDataURL() и заменить его элементом img, который должен обрабатывать конвертер PDF: 

var canvas = $("canvas.base")[0];
var tmpimg    = canvas.toDataURL("image/png");
//console.log(tmpimg);
$("body").append('<img src="'+tmpimg+'"/>');

Обратите внимание, что полученное изображение является просто содержимым canvas (т. Е. Самим графиком) и не включает оси или условные обозначения. Возможно, вам придется выполнить некоторую хитрую подстановку / выравнивание изображения в заполнителе flot, но оно даст вам полезное изображение для начала.

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

1 голос
/ 15 апреля 2010

Я не думаю, что это было реализовано в flot, пока не вижу http://code.google.com/p/flot/issues/detail?id=175

...