Pixenateプラグインで画像をリサイズできない不具合の対処

Pixenateプラグインで画像をリサイズできない不具合の対処

Posted at March 7,2011 12:55 AM
Tag:[MovableType, Pixenate, Plugin]

Movable Typeにアップロードしたアイテム画像を編集できる「Pixenateプラグイン」を以前紹介しましたが、riatwさんから「サイズ変更がアイテムに反映されません」というご連絡を頂きましたので、プラグインの対処方法を紹介します。

この問題はMovable Type 4.xでも発生しますが、ここでの対象バージョンはMovable Type 5.0xのみです。

1.問題点

編集画面を開きます。

編集画面

「ZOOM OUT」をクリックして画面を縮小します。このサンプルの編集前後のサイズは、

  • 編集前:640×480px
  • 編集後:320×240px

です。

リサイズ

この状態で「Save and Quit」をクリックしても、リサイズした結果がアイテムに反映されません。再度編集すると元のサイズで表示されます。要するに編集の実績がまったくありません。

プラグイン修正前のアイテム編集画面

リサイズ以外でも次のように切り抜いた場合、

切り抜き

変更後のサイズがアイテムに反映されないので、アイテム編集画面の画像が元サイズ(=640×480px)で表示されてしまいます。Pixenateによる再編集時は元画像を原寸で表示するので問題ありませんが、実用レベルではありません。

プラグイン修正前のアイテム編集画面

2.原因と対処案

原因はPixenateのAPIでリサイズ後のサイズ情報を取得するAPIがなく、そもそもアイテム更新時にサイズ情報が保存されていません。アイテムはmt_asset_metaテーブルに「image_height」「image_width」というデータを保持していますが、そのデータが書き換えられていません。

また、切り抜きや回転を行わないリサイズのみの場合は、サイズ情報だけでなく、画像自体に何も変更が加えられていません。

ということでリサイズが行われた場合、編集前のサイズと編集後のサイズを比較し、変更があった場合にmt_asset_metaテーブルの書き換えと、画像データの更新を行うようにしてみました。

以下は備忘録ですので、対処を行いたい方は読み飛ばして3項に進んでください。

Pixenateプラグインでリサイズ以外の編集が行われた場合、PXN8.getUncompressedImage()というAPIでURLが取得できますが、リサイズのみの場合はそのAPIではURLが取得できず、その場合、保存のためのプラグインメソッドpixenate_save_changes()が起動されません。よってまずはここを起動するように変更します。

また、元画像のサイズはPXN8.getImageSize()で取得できますが、編集後のサイズを取得するAPIがありません。よって、編集後のサイズは画像編集画面に表示されているimg要素のwidth属性とheight属性から取得し、PXN8.getImageSize()で取得したサイズと異なる場合、プラグインメソッドpixenate_save_changes()を起動し、サイズデータはその引数として渡します。他の編集が行われておらずかつサイズ変更がない、つまり編集が何も行われていない場合のみプラグインメソッドpixenate_save_changes()を起動せず終了します。

起動されたpixenate_save_changes()では、リサイズ以外の編集が行われた場合はURLを利用してLWP::Simple::getstoreで一旦アイテムを保存します(既存処理。画像はここで更新されます)。その後、引数で渡されたサイズと、DBに保持されているアイテムのサイズを判定し、異なる場合はアイテムのサイズ情報更新と、リサイズのみの編集を考慮し、MT::ImageとMT::FileMgrを使って画像の更新を実施します。

3.対処1(テンプレートファイルの差し替え)

mt-plugin-pixenate-tmplのページからアーカイブをダウンロードし、アーカイブを展開した中にある、

  • alt-tmpl/cms/edit_asset.tmpl
  • alt-tmpl/cms/include/asset_table.tmpl
  • plugins/Pixenate/tmpl/Editor.tmpl

を、元のプラグインの同じディレクトリにあるファイルと差し替えてください。今回の修正で差し替えが必要なファイルはEditor.tmplのみなので、すでにMT5.0で利用されている場合はその1ファイルのみを差し替えてください。

4.対処2(プラグインファイルの修正)

Pixenate.plを任意のエディタで開き、以下のsave_changes_mode()の内容を修正してください。

変更前(赤色を削除)

sub save_changes_mode {
    my $app = shift;
    my $imageId = $app->{query}->param('id');
    my $filepath = get_filepath($imageId);
    my $changedImageURL = $app->{query}->param('changedImageURL');
    my $rc = LWP::Simple::getstore($changedImageURL,$filepath);
 
    return "{filepath: \"$filepath\", rc: $rc}";
}

変更後(青色を追加)

sub save_changes_mode {
    my $app = shift;
    my $imageId = $app->{query}->param('id');
    my $filepath = get_filepath($imageId);
    my $changedImageURL = $app->{query}->param('changedImageURL');
    my $rc = LWP::Simple::getstore($changedImageURL,$filepath);
 
    my $asset = MT::Asset::Image->load($imageId);
    my $width = $app->{query}->param('width');
    my $height = $app->{query}->param('height');
 
    require MT::Image;
    require MT::FileMgr;
    my $fmgr ||= $app->blog ? $app->blog->file_mgr : MT::FileMgr->new('Local');
    my $image = new MT::Image( Filename => $asset->file_path );
    my ($data, $w, $h) = $image->scale( Height => $height, Width => $width )
          or return $asset->error(MT->translate( "Error scaling image: [_1]", $image->errstr ) );
    (my $tmp = $asset->file_path) =~ s!(.*)/[^/]+$!$1!;
    my $path = File::Spec->catfile( $tmp, $asset->file_name );
    $fmgr->put_data( $data, $path, 'upload' )
          or return $asset->error(
            MT->translate( "Error creating file: [_1]", $fmgr->errstr ) );
    $asset->meta('image_width', $width);
    $asset->meta('image_height', $height);
    $asset->save;
}

修正後、Pixenateでのサイズ変更が反映されるようになります。

プラグイン修正後のアイテム編集画面

画像編集画面でもサイズが反映されます。

プラグイン修正後の編集画面

関連記事
zenback
人気エントリー
トラックバックURL


コメント

こんにちは。
変更後(青色を追加)の青色部分ですが、現青色部分の上の3行も青色に含めるべきだと思うのですが、どうでしょう。

[1] Posted by 日下部理恵 : March 7, 2011 8:55 AM

>日下部理恵さん
こんにちは。
ご指摘ありがとうございました。
修正致しました。

[2] Posted by yujiro logo : March 7, 2011 12:20 PM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)