JIT Spacetree Сохранить ярлыки как изображения

Question

Я использую JavaScript InfoVis Toolkit ( http://thejit.org/) и пытаюсь напечатать свою расширенную визуализацию пространства-дерева, используя canvas.toDataURL("image/png"), Хотя это работает для моего графика ForceDirected - в SpaceTree у нас есть метки в отдельном DIV, поэтому при печати изображения я получаю пустой график.

Кто-нибудь знает, как печатать этикетки? Любая помощь будет принята с благодарностью. Я приложил ручной скриншот графика и изображения, которое мы получаем при печати.

Да, я видел этот вопрос здесь, но он не отвечает на мой вопрос, так как мы не можем использовать "нативные" ярлыки, потому что мы делаем некоторые на лету.

HTML-код:

<div id="infovis" style="height: 412px;">
   <div id="infovis-canviswidget" style="position: relative; width: 800px; height: 412px;">
     <canvas id="infovis-canvas" width=800" height="412" style="position: absolute; top: 0px; left: 0px; width: 800px; height: 412px;"></canvas>
     <div id="infovis-label" style="overflow: visible; position: absolute; top: 0px; left: 0px; width: 800px; height: 0px;">
           -- Labels are in here --
     </div>
   </div>
</div>

Скриншот вручнуюПустое печатное изображение

Answer 1

Я вроде решил эту проблему с помощью плагина html2canvas. По сути, html2canvas создаст новый холст элемента div (с его дочерними элементами), который затем преобразуется в файл изображения png с myCanvas.toDataURL("image/png"), Это изображение будет включать ваши HTML-метки. (Помните, что html2canvas может неправильно обрабатывать свойства CSS меток.)

 html2canvas(document.getElementById("diagram-container"), {
         onrendered: function(canvas) {
         var img = canvas.toDataURL();
         document.write('<img src="'+img+'"/>');
          }
  });

Answer 2

Я знаю, что эта тема старая. Но, в случае, если кто-то ищет это и не хочет использовать html2canvas. вот решение для вас, ребята.

         Label: {
            type: 'Native'
        },

Добавьте вышеупомянутое в своем коде JavaScript var st = new $jit.ST({ <here> })

Чтобы сохранить его как изображение, добавьте следующий код.

HTML:

<a onclick="getImage(this, 'filename.png', 'tree-id')">download tree</a>

JS:

function getImage(a, filename, id){
 a.link = document.getElementById(id).toDataURL();
 a.download = filename;
}

Удачного кодирования:)

Answer 3

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

Сначала проверьте сообщение здесь HTML 5 Canvas Save Image

Вот как я реализовал решение (получите код функции CanvasSaver по ссылке выше):

function SaveCanvas(canvasName) {
  var canvas = document.getElementById(canvasName);
  var imgUrl = null;

  if (canvas.getContext) {
    //Get alternative image URL for spacetree only
    if (canvasName.indexOf("tag") == -1) {
        imgUrl = $jit.ST.prototype.print.call();
    }

    var cs = new CanvasSaver('http://joeltrost.com/php/functions/saveme.php');
    //cs.saveJPEG(canvas, 'image');
    cs.savePNG(canvas, 'image', imgUrl);
  }
}

Наконец - код вашей кнопки ASP для вызова функции SaveCanvas:

<asp:ImageButton ID="ImageButton1" ImageUrl="Images/save_icon.png" ToolTip="Save Visualization" AlternateText="Save Visualization" OnClientClick="SaveCanvas('tagCloudVis-canvas');return false;" Style="left: 2px; top:3px; position:relative;" runat=server />