php - ユーザーが描画した Web ページの SVG を PNG または JPG に変換するにはどうすればよいですか?

Question

ユーザーが描画できる SVG を含む iframe を持つ Web ページがあります。完成したら、図面を画像に変換したいと思います。どうすればいいですか？

(iOS Safari、Chrome、Firefox、Safari デスクトップ、IE9+ で動作する必要があります)

私はクライアント側のソリューションを好みますが、PHP ソリューションは問題ありません。

Answer 1

私は最近、私が取り組んでいるプロジェクトのためにこれを行いました。様々なアプローチがありますが、私はこれで行きました。

jQueryとcanvgの使用( http://code.google.com/p/canvg/ )

--

私の JavaScript 関数

function getChartData(chartDiv) {

    var svg = $('#' + chartDiv).find('svg').parent().html();
    $('<canvas id="newCanvas_' + chartDiv + '" width="' + $('#' + chartDiv).width() + 'px" height="' + $('#' + chartDiv).height() + 'px" style="display: none; position: absolute; top: 0px; left: 0px; z-index: 0;"></canvas>').insertAfter('body');
    canvg(document.getElementById('newCanvas_' + chartDiv), svg);

    var imgData = document.getElementById('newCanvas_' + chartDiv).toDataURL("image/png");
    return imgData;
}

次にsvg、DIV 内に要素を配置しました。

<div id="mydrawing">
    <svg></svg>
</div>

次に、関数を実行して、SVG の base64 でエンコードされた文字列を画像として取得しました。

base64string = getChartData('mydrawing');

次に、その変数を使用して HTML に画像を表示したり、PHP に渡して保存する画像を生成したりできます。

<img src="data:image/png;base64, base64string" />