ImageConverter4Railsをつかった画像表示方法 - ImageConverter4Rails(画像変換プラグイン) Wiki - ImageConverter4Rails(...

説明文は Rdoc 形式で記載してあります。

---

= ImageConverter4Railsをつかった画像表示方法

ImageConverter4Railsは、WEBサーバなどにアップロードされている画像を取得して
変換をおこないます。
画像ファイルのリンクを規定の書式に書き換えることで
ImageConverter4Railsで変換をおこなった画像を表示することができます。


== リンクの記載方法

画像をImageConverter4Railsを使用して画像を変換表示する場合は以下の手順にしたがって
画像リンクを記載します。
ここでは、http://www.acoustic-inc.co.jp/img/logo.jpg という画像を変換して表示する場合を
例に説明します。


=== 1.変換したい画像のURLをBASE64エンコードします。
変換元となる画像が配置されているURLを、ImageConverter4Rails への変換指示リンクに記載するためにBASE64エンコードします。
例としてhttp://www.acoustic-inc.co.jp/img/logo.jpgというURLをBASE64エンコードすると
aHR0cDovL3d3dy5hY291c3RpYy1pbmMuY28uanAvaW1nL2xvZ28uanBn
となります。

=== 2.HTMLのimgタグで画像の src をImageConverter4Rails への変換指示URLにして記載します。
例として以下のようにURLを記載します。
* <img src="http://ic4r.jp/image_convert/index/aHR0cDovL3d3dy5hY291c3RpYy1pbmMuY28uanAvaW1nL2xvZ28uanBn?fitto=w:1.0">
「ic4r.jp」は、ImageConverter4Rails プラグインをインストールしたサーバのURLになります。環境にあわせて変更してください。
「aHR0cDovL3d3dy5hY291c3RpYy1pbmMuY28uanAvaW1nL2xvZ28uanBn」はBASE64エンコードされた変換元画像のURLです。変換したい画像のURLを指定してください。
「?fitto=w:1.0」は、ImageConverter4Rails での画像変換設定です。画面の横幅一杯に画像が表示されます。

=== 3.携帯端末でHTMLにアクセスして画像を確認します。
リンクを記載したHTMLに携帯端末でアクセスし、画像がブラウザの幅一杯に表示されていることを確認します。


== 変換設定について

ImageConverter4Railsには、fitto=w:1.0 以外にも画像変換時に設定可能なパラメータがあります。
ImageConverter4Rails パラメータは以下の通りです。

=== fitto
* 端末ブラウザの幅に合わせて画像を変換します。
* ?fitto=h:{縮小率},w:{縮小率}の書式で指定します。
* 縮小率に1.0を指定するとブラウザサイズいっぱいのサイズ(100%)で変換します。
* 例）
* ?fitto=w:1.0 で、ブラウザ横幅サイズに変換(ロゴ画像など)
* ?fitto=w:0.5 で、ブラウザ横幅50%のサイズに変換(サムネイル画像など)

=== resize
* 画像のサイズを指定して変換します。
* ?resize=h:{画像高さ},w:{画像幅}の書式で指定します。h が画像の高さ、w が画像の幅です。それぞれ:(コロン）のあとにピクセル値で値を指定します。
* 例）
* ?rezie=h:60,w:20 で、60x20 のサイズの画像に変換。

=== scale
* 変換元画像のサイズからの縮小率(%)でサイズを変換します。
* scale={拡縮率}の書式で指定します。縮小率は 0.1 ～ 1.0 です。
* 例）
* ?scale=0.5 で、元画像の50%のサイズで変換。160x80 の画像であれが 80x40 のサイズに変換されます。

=== transfer
* 変換した画像を転送不可に設定できます。
* ?transfer=no の書式で指定します。こちらを記載すると変換後の画像が転送不可となります。

=== format
* 変換後の画像フォーマットを指定します。
* format={画像フォーマット}の書式で指定します。指定できるフォーマットは、gif/png/jpg です。
* 例）
* ?format=gif で、GIF画像で変換。
* format を指定しない場合は元画像と同じ形式で変換されます。

=== annotate
* 画像に文字を合成します。
* 合成対象の文字の「サイズ」「色」「フォント」「文字列」を指定できます。
* ?annotate=size:{サイズ},color:{色番号},font:{フォント体番号},text:{描画する文字列} の書式で指定します。
* サイズに指定できる値は 1 ～ 1000 です。
* 色は数値で指定し、1=black, 2=white, 3=red, 4=yellow, 5=blue です。
* フォントは数値で指定し、1=ariel, 2=times new roman, 3=gothic, 4=Helvetica です。
* 文字列には合成したい文字を指定します。指定できる文字は半角英数字のみです。
* 例）「Sample」という文字を、フォントサイズ20、赤色、ゴシック体で合成する場合：
* &annotate=size:20,color:3,font:3,text:Sample

=== quantize
* 変換後の画像の色数を指定します。
* quantize={色数} の書式で指定します。指定できる値は 2 ～ 255 です。
* 例）
* ?quantize=32 で、32色に変換します。

=== rotate
* 画像を回転して変換します。
* rotate={回転角度} の書式で変換します。指定できる値は 0 ～ 359 です。
* 例）
* ?rotate=45 で元画像が45度回転した画像に変換します。

=== raise
* 画像にベベル処理を行い立体的な画像に変換します。
* rotate={縁幅} の書式で変換します。指定できる値は 1 ～ 10 です。
* 例）
* ?rise=2

=== swirl
* 画像に渦巻き効果を施します。
* swirl={渦巻き度} の書式で変換します。指定できる値は 1 ～ 1000 です。
* 例）
* ?swirl=100