web-dev-qa-db-ja.com

Javascript画像エディタライブラリ

友達と私はウェブショップを作る予定です。ショップの主な特徴の1つは、顧客が自分でデザインする機能です。私の友人は polyvoreウェブサイト を例として取り上げました。

上記のリンクはエディタページを指しています。 polyvoreでは、顧客はアイテムをページの右側から左側の「キャンバス」にドラッグアンドドロップできます。画像には、サイズ変更、回転、移動のためのシンプルなハンドラーがあります。

これが私たちが達成したい主な機能です。これらの機能を提供する無料のJavaScriptライブラリがあるかどうか知りたいですか？目標はオンラインのPhotoshopアプリケーションのようなものを作ることではないので、あまり高度なものは必要ありません。 polyvoreエディターには、必要な機能のほとんどがあります。

javascriptimagepluginseditor
17
Donny Kurnia

Pixastic には、Canvasを使用する単純なJavascript画像エディタがあります。

6
tokland

変換に関しては、fabricJSは非常に見栄えがします： http://fabricjs.com/

エフェクトについては、CamanJSは多くの制御を提供するようで、プリセットフィルターも含まれています： http://camanjs.com/examples/

5
Ostkontentitan

DarkRoomを使用できます。これは、Webのシンプルで強力な画像エディタです。以下のリンクから見つけることができます： https://mattketmo.github.io/darkroomjs/

1
Emad Armoun

Cappuccino や SproutCore などのフル機能のJavaScriptベースのフレームワークを使用してアプリを開発する場合、この種の軽量の画像操作を実装するのは簡単です。

サイトの実装にもう少し柔軟性が必要な場合は、 jQuery UI または Interface Elements のような小さなライブラリを使用してください（これは非常に不完全なリストです-同様のライブラリがたくさんあります周り）。

1
alunny

これは完全な答えではありませんが、あなたを導くはずです。 Ext-jsにはExt.Resizableというオブジェクトがあります http://www.extjs.com/deploy/dev/docs/?class=Ext.Resizable 、それを任意のノードに適用できます。サイズを変更するためのハンドルを追加します。これはコア（jsqueryのような）ディストリビューションには存在しないため、完全なディストリビューションが必要です。

画像の回転は、すべてのブラウザでサポートされているわけではないため、非常に複雑です（webkitではcssを介した回転が可能です）。私が提案するのは、 http://me.eae.net/projects/iecanvas/demo.html のようなクロスブラウザキャンバスライブラリを使用することです。これにより、上に描画された画像を回転させることができます。キャンバス。ただし、私が言及した2つを実際に組み合わせることはできません。インスピレーションを得るために両方を調べて、独自に展開することをお勧めします（他の誰かがすでにそれを実行するツールを見つけない限り）

0
Juan Mendes