Сохранение изображения Рафаэля как PNG в Internet Explorer

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

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

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

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

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

Ответ 1

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

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

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

Ответ 2

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

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

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

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

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

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

Ответ 3

PHP и JavaScript-решение (не нужно ImageMagick, Apache Batik Rasterizer, или Inkscape):

Требования

PHP
Flash Player 9+ (для Flashcanvas, поправьте меня, если я ошибаюсь)
RaphaelJS
Raphael Export
CanVG
FlashCanvas Free или Pro
Canvas2PNG + save.php(входит в состав FlashCanvas)

Обзор

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

Структура

Инициировать пустой холст
```
<canvas id="myCanvas"></canvas>
```

Нарисуйте несколько VML с Raphael

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

Используйте Raphael Export для преобразования бумаги из VML в SVG.
```
var svg = paper.toSVG();
```

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

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

Отправьте строку 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);
  }
});

Как только canvg сгенерировал данные SVG на холст, вызовите функцию cancan2png Flashcanvas

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

Бумага сохраняется как 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!) и, таким образом, вы потеряете текущую сессию рисования Рафаэля.

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

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

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

canvg с Internet Explorer 8 (работа с Chrome/Firefox) не смог прочитать изображения, созданные с URL-адреса .php, чтобы исправить это, мне пришлось использовать PHP для сохранения "содержимого изображения URL-адреса php", как временное изображение на сервере и использовать это временное изображение в качестве ссылки для данных SVG, заменив его исходную xlink: href.
canvas2png.js возвращается в случае, если ваш браузер поддерживает toDataURL, что делает это решение совместимым с браузером
В качестве последней заметки я подумал, что я бы добавил быстрый метод для экспорта изображений, если вы , используя браузер, который поддерживает toDataURL, и я бы сделал вывод, что браузер также поддерживает SVG, поэтому процесс сохранения изображения намного проще (без необходимости Flashcanvas hassle):
- Инициировать пустой холст
- Нарисуйте SVG с Raphael
- Экспорт строки SVG с использованием экспорта Raphael
- Используйте canvg для синтаксического анализа данных SVG на пустой холст
- Использовать canvas.toDataURL()

Ответ 4

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

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