FCKeditor – 画像をWeb上で編集するプラグイン

「FCKeditor – ImageAdjustor 公開」 で公開しました。

※ 一応の完成版に差し替えました。今までにサンプルを実行した方はブラウザのキャッシュをクリアしてお楽しみください。
※ デバッグ用に画像の色数を落としたままでした。現在は治っています。

画像(180x120)

デジカメで撮った写真をWeb上で公開する場合、こんな編集が必要じゃないですか?

・縦横回転/上下回転
・サイズ変更
・切取り

これが簡単に出来てしまうFCKeditorのプラグインを作りました。
ファイル更新部分は PHP + GD で実現しています。

欲しい方はコメントお願いします。コメントが多いようなら公開します。

ここをクリックすると、実際にサンプルを実行できます。
FCKeditor サンプル

画像(180x120)

デジカメ画像を単純にアップロードしました。
このように画面いっぱいになってしまいます。

画像(162x180)

ここで画像を選択(クリック)して、ツールバーの「イメージ調整」をクリックしてください。
「イメージ調整」のダイアログが開きます。

画像は左がプレビュー、右が全体像です。

画像(162x180)

「-90°」をクリックして画像を回転します。

画像(162x180)

「枠を回転」をクリックして青い枠を回転します。

画像(162x180)

「幅」「高さ」を変更して、枠のサイズを変更します。

画像(162x180)

「フィット」をクリックして倍率を自動調整します。

画像(180x37)

「OK」をクリックすると、新しいファイル名で保存されます。

画像(180x119)

うまく変更できました。

15件のコメント

  1. わーお!スバラシイ

    プラグイン欲しいです!

    というかまだちゃんとFCKを動かせてなかったりするんですが…(^^;

  2. メルマガ読んですます!!っていうか、プラグイン欲しいです^^;

    これって、ImageMangerの日本語版って感じですか?

    使い易いですね。

    最近FCKeditor使い始めたので、参考にさせてもらってます。

    PS

    メルマガ第4回で気になった点が2つありました…

    1.DirSeparator()関数について

    PHPの定数であるDIRECTORY_SEPARATORを使えば一発で解決するのでは?

    2.ereg_replaceを使っている件について

    preg系の方がereg系よりも処理が速いのでこちらの方がよいのでは?

    次のメルマガも楽しみにしています。

    エキスパート注文しましたのでよろしくお願いします(^0^)/

  3. iwataさん、ありがとうございます。

    1.知りませんでした。あきらはまだまだ勉強不足ですね。ただ、基本を押さえていればこんな別解もあるということで…

    2.繰返しの中だと処理速度を考慮しますが、その他の場合は使いやすい方でいいと思います。

    また改良点があったらよろしくお願いします!

    PS. 次のメルマガでこの改善を紹介しても良いですか?

  4. 追記

    DIRECTORY_SEPARATOR は PHP 4.3.0-RC2 以降で使用可能です。

    他のバージョンにも対応できるようこのままにしておきます。

  5. あきらさん、コメントありがとうございます。

    > DIRECTORY_SEPARATOR は PHP 4.3.0-RC2 以降で使用可能です。

    そうでしたか。。

    それはそれで私も勉強不足ですね^^;

    ありがとうございます。

    2.について

    そもそも処理速度でいうなら、str_replace方がいいですね、今回正規表現使っていないので。

    まあ仰るように繰り返し処理じゃないのであまり意味ないでしょうが、一応補足。。。

    PS

    それで目的のプラグインってどうやって入手できますか?

    PSのPS

    今携帯に対応したプラグインの開発で四苦八苦しています(汗;

  6. 「FCKeditorエキスパート」にはサンプルで組み込んでいます。

    以下のフォルダです。

    sample/FCKeditor/editor/plugins/ImageAdjustor/

    一般公開を検討します。

    欲しければ「FCKeditorエキスパート」を買ってください、と言うつもりでもないので…

  7. FCKeditorエキスパート大変参考になりました!ありがとうございます。

    ところでサンプルコードのライセンスってFCKeditorと同レベルと考えてよろしいのでしょうか?

  8. あくまでサンプルですので、ライセンスは主張しません。

    しかし、商品の一部ですので、転売・一部または全部の無断掲載は禁止とさせていただきます。

  9. 転売、転載等の目的は一切ございません。

    お客様のサイトに設置したらスゴイ喜ばれそうなツールなので質問させていただきました。

    phpとjavascriptでこんなふうにできるなんてちょっと感動ものです!

  10. このプラグインについてなのですが、透過GIFは未対応なのでしょうか?

    透過GIFを画像編集すると画像が真っ暗になってしまうのですが…

    何か設定がおかしいのでしょうか?

  11. とりあえず透過GIFに対応しました。

    しかし、回転をすると透過部分が黒くなってしまいます。

    このサーバでは PHP の imagerotate を実行すると透過部分が黒くなってしまうのが原因です。

    (PHP 4.4.4 + GD 2.0.28)

    また、アニメーションGIFは不可です。

    回避方法はありません。

    幸い、このサーバでは ImageMagick が使えます。

    ImageMagick 版での対応を考えています。

    ついでにファイル名に空白を含む場合に対応しました。

  12. Firefox で透過GIFを調整する場合、プレビューが乱れます。

    現時点では透過GIFは未サポートとしておきます。

  13. FCKeditorエキスパート第2版のサンプルは大変参考になります。

    早速、質問ですが画像の

    イメージ調整ダイアログでイメージを調節してOKボタンを押すと「保存してよろしいですか?」のダイアログは表示されるがOKボタンを押しても保存されません。

    どこが原因か分かりますか?

    尚、サンプルはいじらずにそのままアップロードしました。

  14. OKボタンを押すとAjax部分が実行され、php/connector.php が実行されます。

    応答が無いと言うことは、この php/connector.php がコケているはずです。

    Apadheなどのエラーログをご確認ください。

    考えられる原因としては、

    (1) アップロードディレクトリを自身の環境に合わせて修正していない。

    (2) アップロードディレクトリのパーミッションを書込み可能にしていない。

    (3) GDが有効でない。

    などです。

    なお、こういった個別の回答の場合、ブログ外でメールでやり取りした方が良いと思います。

    ご相談に乗りますので、正しいメールアドレスで再度コメントを投稿していただけませんか?

  15. 返事が遅くなりまして申し訳ありませんでした。

    あきらさんが書いてくださった3つの原因を中心に調べてみたいと思います。

    とは言ってもなかなか調べる時間がなさげですが^^;

    ありがとうございます

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください