HTML / CSSのスクリーンショットを取るためにPILを使って

Question

私は、画像をアップロードするには、ウェブサイト上でユーザーを有効にし、その上にいくつかのテキストを書きたいです。また、彼らは/ /スケールをトリミングした画像やテキストを移動することができるはずです。その原料のために、私はjQueryの中でそれを行うことができます。

彼らは、画像に、彼らはそれ望むように作られた後は、

、私は（PILを使用して）その画像のスクリーンショットを撮ると、サーバー上に保存することができます方法はありますか？

これを行うための最善の/適切な方法は何ですか？

Answer 1

絵の「スクリーンショット」を取る最高でもない、またそれを行うための適切な方法。スクリーンショットを撮るには、Webサイトのシナリオでは、「可能ではない」であるクライアントマシン上でコードを実行する必要があります。

を見てください lolcatビルダーの（私が今より深刻な例を考えることはできません。 ）。あなたは、「プレビュー」ボタンをクリックするたびに、画像SRCは、テキスト、そのスタイルと位置を含むURLで更新されます。要求が表示する新しい画像を生成するサーバーによって処理されます。

Answer 2

私は、サーバー側でのPythonを得たと仮定します。

IMOの最善の方法は、何らかの形で再レンダリング、それはPILを使用して、クライアントからのすべての編集パラメータ「を取得する」ことです。

アップデート：私はそれを行いますどのように サーバー側では、あなたはポストを処理するためのURLが必要です。 クライアント側では、（各編集の後、）編集パラメータと、そのURLにポストを送信します。 私はこれに簡単な解決策は存在しないと思います。

あなたが最終的な画像をレンダリングするためにPILを使用しますが、パラメータのみを覚えていない場合は、

たぶん、クライアントからの各ビューは、自分自身をレンダリングすることができますか？

Answer 3

PILは、それはオプションではありません、ジャック・ハが示唆するように、あなたがそれらをサーバーに画像編集のすべての命令をアップロードし、再実行しようとするので、しない限り...クライアント側では使用できません。あなたのコードベースのサイズを倍に、クライアントとサーバーの両方で同じ編集ルーチンを実装する必要があると思いますので、私はこのことから敬遠でしょう。 （おそらく、あなたのサーバー側のコードは、それが理にかなってJavaScriptで書かれていたので、描画コードを再利用することができます。）

その代わり、完全な画像操作クライアント側の処理を行いJavaScriptライブラリを見つけるに見て、ブラウザは、最終的な、編集した画像をアップロードしています。私はその領域のオプションに慣れていないんだけど、これまでになっ迅速なGoogle検索は、使用しますキャンバス要素は、画素データを格納する。

Answer 4

まあ、他の人がこれをやってからあなたを阻止しようとしている場合でも、それはおそらくないだろうという難しいます。

クライアント側では、あなた、あなたは、作物のためにスケーリングすることができ、透明性、で、画像の上/サイズ変更可能な浮いているのdivを定義します。

移動、まだ簡単に、私はそれがテキストのみに適用されると仮定し、あなたが動的にクライアント側でドラッグ可能なスパンを作成します。

スケール、私はそれを行うためのシンプルなUIの見当がつかないます。

あなたのイメージを更新したい場合は、

、あなたがあなたのデータをシリアライズ（あなたのテキストのあなたのクロップのdivと位置の位置が画像に位置からの相対/スケーリングを、またがっています。）その後、あなたが好きなJSONまたは類似のものを使用してサーバーにデータを転送します。

次に、サーバ上で、パイソン/ PILを使って、あなたが連載されている変換を再現します。