Сохранение изображения Raphaël в формате PNG в Internet Explorer - PullRequest
Новая
       18

Сохранение изображения Raphaël в формате PNG в Internet Explorer

11 голосов
/ 07 ноября 2010

У меня есть прекрасная графика, выполненная с использованием Raphaël (библиотека JavaScript), и я хочу добавить функцию, чтобы сохранить ее в виде PNG файла.

Это просто в любом браузере, кроме Internet Explorer, потому что в браузерах, отличных от Internet Explorer, я получаю SVG как вывод Raphaël, а затем я могу преобразовать его в canvas (используя библиотеку cansvg) и canvas имеет toDataURL() метод. Но в Internet Explorer Рафаэль выводит VML . Я не могу использовать плагин Chrome . Зачем?

Пользователи моего приложения выбирают Internet Explorer только потому, что он предустановлен в Windows, и у них нет разрешения на установку чего-либо еще. Поэтому они не могут установить этот плагин. Поэтому моей второй идеей было получить строку SVG в Internet Explorer, передать ее в cansvg, чтобы получить холст, а затем использовать flashCanvas.

Я пытался обмануть Рафаэля, чтобы он думал, что он работает в браузере, отличном от Internet Explorer, и получить SVG в качестве вывода, но мне это не удалось, поскольку Raphaël использует некоторые функции JavaScript, которые отсутствуют в Internet Explorer, для создания SVG.

Так как мне выполнить эту задачу в Internet Explorer?

Ответы [ 4 ]

2 голосов
/ 22 августа 2013

Решение PHP & JavaScript (не требуется ImageMagick , Apache Batik Rasterizer или Inkscape !):

Требования

  1. PHP
  2. Flash Player 9+ (для Flashcanvas, исправьте меня, если я не прав)
  3. RaphaelJS
  4. Экспорт Raphael
  5. CanVG
  6. FlashCanvas Free или Pro
  7. Canvas2PNG + save.php (входит в комплект FlashCanvas)

Обзор

  1. Создание пустого холста
  2. Нарисуйте немного VML с помощью Raphael
  3. Используйте Raphael Export для конвертации бумаги из VML в SVG
  4. Инициализация Flashcanvas на пустом холсте
  5. Отправка строки SVG из Raphael Export в canvg
  6. Когда canvg сгенерирует данные SVG на холсте, инициированном FlashCanvas, вызовите функцию canvas2png Flashcanvas
  7. Бумага сохранена в формате PNG!$$$

Разбивка

  1. Создание пустого холста 

    <canvas id="myCanvas"></canvas>

  2. Нарисуйте немного VML с Рафаэлем 

    //Basic Example
var paper = Raphael(10, 50, 320, 200);
var circle = paper.circle(50, 40, 10);
circle.attr("fill", "#f00");
circle.attr("stroke", "#fff");

  3. Используйте Raphael Export для преобразования бумаги из VML в SVG. 

    var svg = paper.toSVG();

  4. Инициализация Flashcanvas на пустом холсте 

    var canvas = document.getElementById('export');
if (typeof FlashCanvas != "undefined") {
  FlashCanvas.initElement(canvas); //initiate Flashcanvas on our canvas
}

  5. Отправьте строку SVG из Raphael Export в canvg 

    canvg(canvas, svg, {
  ignoreMouse: true, //I needed these options so Internet Explorer wouldn't clear the canvas
  ignoreAnimation: true,
  ignoreClear: true,
  renderCallback: function() {
    setTimeout(function() {
      canvas2png(canvas);
    }, 1000);
  }
});

  6. Когда canvg сгенерирует данные SVG на холсте, вызовите Flashcanvas 'canvas2png.функция 

    //This is called within the renderCallback canvg function above:
renderCallback: function() {
  setTimeout(function() {
    canvas2png(canvas);
  }, 1000);
}

  7. Бумага сохраняется в формате PNG!$$$

Заметки / Выводы

  • НЕ ВКЛЮЧАЙТЕ / ИСПОЛЬЗУЙТЕ EXCANVAS с FLASHCANVAS , эта одна ошибка была у меняэто почти заставило меня отказаться от FlashCanvas во многих случаях.
  • Flashcanvas должен быть включен как можно раньше в <head>, по некоторым причинам у меня были проблемы при включении flashcanvas.js позже.

  • Canvas2png.js по умолчанию предложит пользователю сохранить файл .png.Кроме того, вы можете записать файл .png на свой сервер, отредактировав файл flashcanvas save.php из : 

    readfile('php://input');

    В : 

    //Comment these out so that the download is not forced
//header('Content-Type: application/octet-stream');
//header('Content-Disposition: attachment; filename="canvas.png"');

$putdata = fopen("php://input", "r");
$fp = fopen("path/to/image_name.png", "w");
while ($data = fread($putdata, 1024)) {
  fwrite($fp, $data);
}
fclose($fp);
fclose($putdata);
  • После последнего примечания: если вы решили сохранить изображение на сервере, по умолчанию вы будете перенаправлены в пустой файл save.php при вызове canvas2png() (save.php не запускается AJAX!) и, таким образом, вы потеряете текущий сеанс рисования Рафаэля.

Поэтому, если вы хотите вызвать этот метод без потери текущего сеанса Рафаэля , то, как я это решилнужно было хранить документ Рафаэля на одной странице, а страницу <canvas> - на другой.

Общая идея заключается в том, что вы сохраняете свою деятельность по рисованию Рафаэля на своей главной странице, и когда вы готовы к экспорту /сохраняя изображение, вы можете открыть новое окно, содержащее empty canvas , и отправить SVG-данные на эту новую временную страницу.С этого момента вы можете повторить шаги точно в том месте, где мы остановились, за исключением нового окна, а в конце файла save.php, когда изображение было сгенерировано и сохранено, вы можете использовать вызов javascript: self.close() длязакройте это новое окно.

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

  • canvg с Internet Explorer 8 (Chrome / Firefox работал) не смог прочитать изображения, сгенерированные из URL .php, чтобы исправить это, мне пришлось использовать PHP, чтобы сохранить «содержимое изображения php url» как временное изображение на сервере и использовать это временное изображение какссылка на данные SVG, заменив ее исходную xlink: href .

  • canvas2png.js, имеет откат на тот случай, если ваш браузер поддерживает toDataURL, делая этосовместимость с различными браузерами

  • В качестве заключительного замечания я подумал, что я бы включил быстрый способ экспорта изображений, если вы используете браузер, поддерживающий toDataURL , который я бы сделал вывод, что браузер также поддерживает SVG , поэтому процесс сохранения изображения намного проще (без необходимости использования Flashcanvas):

    1. Инициировать пустой холст
    2. Нарисуйте SVG с Рафаэлем
    3. Экспорт строки SVG с использованием Raphael Export
    4. Используйте canvg для разбора данных SVG на пустой холст
    5. Использовать canvas.toDataURL ()
2 голосов
/ 02 декабря 2010

Raphaël использует VML в Internet Explorer и SVG во всех других браузерах. Canvas имеет встроенную возможность экспорта в виде изображения, где такая функция не встроена в VML. Вы можете использовать код на стороне сервера, чтобы добиться того же для неподдерживаемых браузеров.

Альтернативным решением является использование ActiveX решений для Internet Explorer, которые могут генерировать изображение из VML. Одним из таких решений является Компонент ActiveX моментального снимка HTML .

Как правило, не рекомендуется внедрять решения ActiveX, если это не является абсолютно необходимым.

2 голосов
/ 07 декабря 2010

RaphaelJS не использует холст. Он использует VML в IE, но SVG во всех других браузерах.

Как сказал ОП, вы можете взять необработанный SVG (поскольку это целый документ SVG) и загрузить его, он ищет некоторые аналогичные функциональные возможности с VML.

Единственный способ, которым я мог бы подумать, это заставить IE отправлять данные VML (если это вообще возможно) обратно на сервер, который выполняет преобразование в PNG и загружает его.

Однако, если вам нужен PNG, вам, вероятно, лучше перейти к холсту с самого начала, поскольку вам, скорее всего, не понадобится векторная сторона графики, если вы затем конвертируете в растровое изображение. Проверьте холст и скрипт холста Google IE, чтобы увидеть, можете ли вы использовать его вместо этого.

Что касается «Поддержка браузеров для создания графики все еще довольно ограничена», то это не так. Посмотрите демонстрации RaphaelJS.com, это вполне выполнимо и хорошее решение. Единственная проблема - IE <9, которая не использует современные технологии, такие как HTML5, CSS3 или SVG. </p>

Все, что поддерживает Canvas или Google IEcanvas, также может дать приличные результаты.

0 голосов
/ 12 ноября 2010

Возможно, вы захотите взглянуть на создание ваших изображений на стороне сервера. Поддержка браузерами для создания графики все еще довольно ограничена.

Node Canvas только что вышел, и я использовал ImageMagick в прошлом с большим успехом.

...