1

頻繁に質問する必要はありませんが、今回は Google に失敗しました

Javascriptを使用して外部SVGファイルを次のように編集するサイトがあります。

<embed id="svgFile" src="svgFile.svg" type="image/svg+xml" />

次のように、Javascript と Jquery を使用してオンザフライで SVG を編集するための入力を含むフォームがあります。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="JavascriptFile.js"></script>

....HTML....

<input id="txt1" name="text_one" maxlength="16" type="text" class="text" placeholder="Line one" onkeyup="update(1)" />

JavaScriptは次のようなものです：

function update(n) {var txtID = n;
var txt = document.getElementById("txt" + txtID).value;
var svgTXT = document.getElementById("svgFile").getSVGDocument().getElementById("txt" + txtID);
svgTXT.textContent = txt;
}

これですべて問題なく動作し、ページ上の「画像」/SVG が更新されますが、この更新された画像を保存する必要があります。
新規必要なファイル形式が正確にはわかりませんが、情報を php/MySQL DB と PDF に保存することは最小限です。PDFはユーザーが保存して印刷するためのものです...彼らがやりたいことは何でも、DBはオンライン保存用です。

私はサイトにリンクされた JQuery も持っていますが、Javascript をコーディングする方が自然だと思います。何らかのソリューション/例/プラグインが必要です。誰か助けてくれませんか!?

4

2 に答える 2

0

SVG として保存

を使用XMLSerializerして SVG のソース XML 表現を取得し、それをサーバーに送り返します (必要に応じて AJAX を使用します)。

PNG として保存

SVG のデータ URIXMLSerializerを作成するために使用し、それを要素のソースとして使用します。この画像を HTML5 キャンバスに描画し、使用して内容を base64 でエンコードされた PNG データ URI に変換します。これをサーバーに投稿してファイルとして保存できます。<img>toDataURL()

警告: Chrome の現在のバージョンと Firefox の最近のバージョン (ただし最新ではない) は、現在セキュリティ上「パント」し、SVG を描画するときにキャンバスを汚染し、データ URI を取得できません。

注: 上記の両方の回答には IE9+ が必要です。しかし、それは SVG にも当てはまります。

于 2012-06-20T12:54:56.910 に答える