Любовь Создание SVG С помощью JavaScript?Переместить его в сервер!

Я надеюсь, что сейчас, в 2014 году, нет необходимости объяснять, почему SVG является благословением для разработчиков, которые хотят, чтобы их графики выглядят острыми на всех устройствах, особенно с их огромным разнообразием резолюций .

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

Что Проблема

Почему бы вам даже не нужно генерировать SVG на сервере?Технология полностью на стороне клиента, так что бы мотивировать кто-нибудь, чтобы переместить его оттуда

Прежде чем ответить на эти вопросы, давайте посмотрим на состояние industry.Когда мы говорим о “создании SVG” в настоящее время, мы имеем в виду “генерации SVG с помощью JavaScript.” Текущее состояние браузере поддержку и библиотек делает создание сложных визуальных эффектов (даже с анимацией и взаимодействия с пользователем) нетривиальная задача: Просто выберите библиотеку, котораяподходит ваша потребность .

И есть много, чтобы выбрать из, от общего назначения из них, такие как Raphaël.js 1 , Snap.svg 2 и svg.js 3 в множества мелких, а также, если вы черчения и визуализации данных, gRaphaël 4 , Highcharts 5 и D3 6 .

Так прямо вопрос, как мы продолжаем генерировать SVG с JavaScript, а также положить результаты поколения на сервере?Вопрос в том, немного долго, но вот причины, почему мы должны на него ответить:

  • Чтобы разрешить пользователю загрузить graphicЕсли мы не хотим, чтобы напугать пользователя с этим «неизвестного» формате, то мы должны преобразовать SVG в PNG или PDF .
  • Чтобы включить графики для вставлен в emailМы все любим графики в наших электронных писем, и мы предпочитаем Retina-Ready те .
  • Чтобы включить графику, который будет отображаться на другом websiteПодумайте API .
  • Для улучшения performanceСложной логики визуализации может легко повесить браузер для нескольких секунд.По генерации SVG на сервере, мы можем кэшировать результат, а затем доставить в кэше SVG, когда следующий пользователь хочет, чтобы это .

Solutions

Просто Воссоздать всю логику на Server

Это решение можно, только не практично.Большинство зрелых языках фоновых есть библиотеки для генерации SVG.Но мыразработчики.Мы не хотим, чтобы воссоздать ту же логику в два раза, потому что это приведет к ошибкам, проблемы интеграции и трудностями необходимости поддержки .

Простой Solution

Самый простой способ поставить сгенерированный SVG на сервере, это просто отправить сгенерированные данные с просьбой AJAX, когда он будет завершен .

Ниже приведен простой пример с Raphaël.js и JQuery.Давайте начнем с простого HTML как шаблонного:

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
      <script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
   </head>
   <body>
      <div id="svg"></div>
   </body>
</html>

Теперь добавьте наш код рисования на него:

$(function() {
   var svgContainer = document.getElementById("svg");
   var paper = Raphael(svgContainer, 640, 480);
  
   paper
      .rect(0, 0, 640, 480, 10)
      .attr({
         fill: '#fff',
         stroke: 'none'
      });
    
   var circle = paper
                .circle(320, 240, 60)
                .attr({
                   fill: '#223fa3', 
                   stroke: '#000',
                   'stroke-width': 80,
                   'stroke-opacity': 0.5
                });
   paper
      .rect(circle.attr('cx') - 10, circle.attr('cy') - 10, 20, 20)
      .attr({
         fill: '#fff',
         stroke: 'none'
      });
  
   $.post(
      '/svg_catcher',
      { content: svgContainer.innerHTML }
  );
});

На сервере, мы просто кэшировать результат и сохранить или обработать ее так, как хотелось бы.Вот полученное изображение, в случае, вам интересно:

8
В случае, если ваш браузер не поддерживает эту фотографию, here’ са PNG version 9 .

Этот метод является абсолютно подходит не только для Рафаэле, но и для любого SVG-генерации библиотеки.Я просто взял Рафаэля, потому что это популярно, боевые испытания решением, с API, который легко понять.Это существенно упрощает создание и обработку изображений с помощью JavaScript, а также поддерживает VML для старых браузеров, которые не поддерживают SVG .

Этот подход легко и просто, но она имеет много недостатков, слишком:

  • Вам придется встраивать все внешние ресурсы (в основном изображения) после их загрузки;В противном случае, все преобразователи покажет белый заполнитель вместо оригинальный источник .
  • Если SVG большая и сети пользователя не является надежным, то в результате файл может в конечном итоге недействительными.Мы могли бы проверить действия на стороне сервера, но это не поможет при следующем точки .
  • Вредоносное вход проблема.Замена красивый красочный бизнес диаграмму с (SVG) изображения котенка легко.Технически, это было бы справедливо, но вы можете видеть, почему это было бы вредно .

Вы, безусловно, может принять этот подход, если вы доверяете своим пользователям (если это приложение интрасети, например).В противном случае, риск для безопасности может быть слишком большим .

PhantomJS

Для устранения ввод пользователя из уравнения (или свести ее к минимуму, насколько это возможно), мы должны двигаться наш скрипт поколения к серверу.

Много сложного кода работает в браузере.Самый простой способ запустить ее на сервере, чтобы переместить браузер с сервера.Благодаря PhantomJS 10 , то есть полностью выполнимо .

PhantomJS является реализация WebKit, которым можно управлять с помощью JavaScript.Грубо говоря, это фактическая — еще без головы — браузеру, что означает, что веб-страницы никогда не оказывается .

Начните с установки PhantomJS на вашей системе, который легко, следуя официальный documentation 11 .Тогда мы изменим наш скрипт немного, чтобы заставить его работать с PhantomJS: во-первых, создать index.html с шаблонного кода для нашего генератора:

<!DOCTYPE html>
<html>
   <head>
      <script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
      <meta charset="utf-8">
   </head>
   <body>
      <div id="svg"></div>
   </body>
</html>

Затем создайте generator.js, который будет управлять PhantomJS:

var fs = require('fs');
var page = require('webpage').create();
var url = 'file://' + fs.absolute('./index.html');

var svgDrawer = function() {
   var svgContainer = document.getElementById("svg");
   var paper = Raphael(svgContainer, 640, 480);
   paper
      .rect(0, 0, 640, 480, 10)
      .attr({
         fill: '#fff',
         stroke: 'none'
    });
   var circle = paper
                .circle(320, 240, 60)
                .attr({
                   fill: '#223fa3',
                   stroke: '#000',
                   'stroke-width': 80,
                   'stroke-opacity': 0.5
                });
   paper
      .rect(circle.attr('cx') - 10, circle.attr('cy') - 10, 20, 20)
      .attr({
         fill: '#fff',
         stroke: 'none'
    });

   return svgContainer.innerHTML;
};

page.open(url, function (status) {
   console.log(page.evaluate(svgDrawer));
   phantom.exit();
});

Сейчас она готова для создания SVG для нас:

phantomjs generator.js > result.svg

Итак, у нас есть генератор, который полностью работает на нашем сервере, без нашего написал много кода .

Можем ли мы сделать это лучше?Да

Запуск time phantomjs generator.js > result.svg ушло около 0,2 секунды на моей машине .

0.14s user 0.03s system 74% cpu 0.232 total

Наиболее ресурсоемкой задачей было, конечно, мы должны сделать это для каждого запроса, который несколько неэффективно “браузера потепление.”.Мы можем предотвратить это, поворачивая наш сценарий PhantomJS из раствора “одно-Run” к реальному серверу, который прислушивается к данным и отвечает SVG .

Давайте сделаем это.Мы не хотим, чтобы генерировать тот же SVG каждый раз, так что мы также добавим динамическую поддержку нашей визуализации.Наша конечная рабочий будет выглядеть следующим образом:

  1. Запустите сервер, который будет слушать на специальный порт для наших запросов .
  2. Передать его просьбу с нашим полезных данных для визуализации .
  3. Получите ответ с SVG на основе наших данных .

Для запуска сервера, мы будем использовать встроенный в module
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров

Comments are closed.