11

Raphaël (JavaScript ライブラリ)を使用して素敵なグラフィックを作成しました。PNGファイルとして保存する機能を追加したいと考えています。

これは Internet Explorer を除くすべてのブラウザーで簡単です。なぜなら、Internet Explorer 以外のブラウザーでは、Raphaël からの出力としてSVGを取得し、それを (cansvg ライブラリーを使用して) キャンバスに変換でき、キャンバスにはtoDataURL()メソッドがあるからです。しかし Internet Explorer では、Raphaël はVMLを出力します。Chromeフレーム プラグインを使用できません。なんで？

私のアプリケーションのユーザーは、Windows にプレインストールされているという理由だけで Internet Explorer を選択し、他のものをインストールする権限がありません。そのため、このプラグインをインストールできません。そこで、私の 2 番目のアイデアは、Internet Explorer で SVG 文字列を取得し、それを cansvg に渡してキャンバスを取得し、flashCanvas.

Raphaël をだまして、Internet Explorer 以外のブラウザで実行されていると思わせ、出力として SVG を取得しようとしましたが、Raphaël は Internet Explorer にはない JavaScript 関数を使用して SVG を生成するため、失敗しました。

では、Internet Explorer でこのタスクを実行するにはどうすればよいでしょうか。

4

4 に答える 4

2

RaphaelJSはcanvasを使用しません。IEではVMLを使用しますが、他のすべてのブラウザーではSVGを使用します。

OPが言ったように、生のSVG（SVGドキュメント全体であるため）を取得してダウンロードすることができます。彼はVMLで同様の機能を探しています。

私がそれを行うと考える唯一の方法は、IEにVMLデータを（可能であれば）サーバーに返送させ、サーバーがPNGへの変換を行ってダウンロードすることです。

ただし、PNGが必要な場合は、最初からキャンバスを使用する方がよいでしょう。ビットマップに変換する場合は、グラフィックのベクトル側は必要ない可能性が高いからです。代わりにそれを使用できるかどうかを確認するために、canvasとgoogleIEキャンバススクリプトをチェックアウトしてください。

「グラフィックを生成するためのブラウザのサポートはまだかなり制限されています」に関しては、そうではありません。RaphaelJS.comのデモをチェックしてください。これは完全に実行可能であり、優れたソリューションです。唯一の問題は、HTML5、CSS3、SVGなどの最新テクノロジーを採用していないIE<9です。

CanvasまたはgoogleIEcanvasをサポートするものはすべて、適切な結果を生成することもできます。

于 2010-12-07T19:38:28.353 に答える
2

PHP & JavaScript ソリューション ( ImageMagick、Apache Batik Rasterizer、またはInkscapeは必要ありません!):

要件

  1. PHP
  2. Flash Player 9+ (Flashcanvas の場合、間違っていたら訂正してください)
  3. RaphaelJS
  4. ラファエル エクスポート
  5. CanVG
  6. FlashCanvas Free または Pro
  7. Canvas2PNG + save.php (FlashCanvas に同梱)

概要

  1. 空のキャンバスを開始する
  2. Raphael で VML を描画する
  3. Raphael Export を使用して用紙を VML から SVG に変換する
  4. 空のキャンバスで Flashcanvas を初期化する
  5. Raphael Export から canvg に SVG 文字列を送信します
  6. canvg が FlashCanvas によって開始されたキャンバスに SVG データを生成したら、Flashcanvas の canvas2png 関数を呼び出します。
  7. 紙はPNGで保存！$$$

壊す

  1. 空のキャンバスを開始する

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

  2. Raphael で 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. Raphael Export から canvg に SVG 文字列を送信します

    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 と一緒に含めたり使用したりしないでください。この 1 行の間違いが原因で、FlashCanvas を何度も諦めそうになりました。
  • Flashcanvas は、できるだけ早く に含める必要があります<head>。何らかの理由で、後で flashcanvas.js を含めるときに問題が発生しました。

  • デフォルトでは、Canvas2png.js はユーザーに .png ファイルを保存するように促します。または、Flashcanvas save.php ファイルを編集して、.png をサーバーに書き込むこともできます。

    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 Paper を 1 つのページに保持し、その<canvas>ページを別のページに保持することでした。

一般的な考え方は、Raphael の描画アクティビティをメイン ページに保持し、画像をエクスポート/保存する準備ができたら、空の canvasを含む新しいウィンドウを開き、 SVG データをその新しい一時的に送信することです。ページ。そこから、新しいウィンドウを除いて、中断したところから手順を正確に実行できます。画像が生成されて保存されたら、save.php ファイルの最後で、javascript 呼び出しを使用できますself.close()。窓。

キャンバスを SVG データで適切に処理できるようにするには、この新しいウィンドウをポップアップする必要があります。

  • Internet Explorer 8 (Chrome/Firefox が動作) の canvg は、.php URL から生成された画像を読み取ることができませんでした。元のxlink:hrefを置き換えることにより、その一時画像を SVG データの参照として使用します。

  • canvas2png.js には、ブラウザがサポートしている場合に備えてフォールバックがあり、toDataURLこのソリューションはブラウザ間の互換性があります

  • 最後に、 toDataURL をサポートするブラウザーを使用している場合は、画像をエクスポートする簡単な方法を含めたいと思いました。ブラウザーは SVG もサポートしていると推測されるため、画像を保存するプロセスははるかに簡単です。 (Flashcanvas の手間は必要ありません):

    1. 空のキャンバスを開始する
    2. Raphael で SVG を描画する
    3. Raphael Export を使用して SVG 文字列をエクスポートする
    4. canvg を使用して、SVG データを空のキャンバスに解析します
    5. canvas.toDataURL() を使用する
于 2013-08-21T20:00:27.373 に答える
2

Raphaël は、Internet Explorer では VML を使用し、他のすべてのブラウザーでは SVG を使用しています。Canvas には画像としてエクスポートする機能が組み込まれていますが、そのような機能は VML には組み込まれていません。サーバー側のコードを使用して、サポートされていないブラウザーでも同じことを実現できます。

代替ソリューションは、VML からイメージを生成できる Internet Explorer用のActiveXソリューションを使用することです。そのようなソリューションの 1 つが、HTML スナップショット ActiveX コンポーネントです。

一般に、どうしても必要な場合を除き、ActiveX ソリューションを実装することはお勧めしません。

于 2010-12-02T14:04:15.680 に答える
0

サーバー側で画像を生成することを検討することをお勧めします。グラフィックスを生成するためのブラウザーのサポートは、まだかなり制限されています。

Node Canvasが登場したばかりで、過去に ImageMagick を使用して大きな成功を収めました。

于 2010-11-12T19:28:12.690 に答える