ImgeFlux

概要

ImageFluxとはさくらインターネット社が提供する、画像変換・配信エンジンです。
Spearly CMS Basicプラン以上をご利用の方は、無償でImageFluxを使った画像編集機能をお使いいただけます。
Spearly CMSにおけるImageFluxについての概要はこちら

基本的な使い方

Image Fluxは画像フィールドに入力した画像と、リッチテキストエディタ内の画像に適用することができます。

画像フィールドの画像を編集する

1. 編集したい画像の「画像を加工」ボタンをクリックし、画像加工画面を開く
   
2. 「効果を追加する+」から効果を適用する
   
3. 任意の効果を追加します。効果は複数を重ねがけできます。
   
4. APIや埋め込みタグをもちいて埋め込む
   (参考画像は埋め込みタグを用いたもの)
   

リッチテキストフィールドに挿入した画像を編集する

1. 編集したい画像を選択し、「画像を加工」ボタンをクリックする。
   
2. 「効果を追加する+」から効果を適用する
   
3. 効果を組み合わせ画像をトリミングや出力フォーマットなど効果を重ねがけする
   
4. APIや埋め込みタグをもちいて埋め込む
   (参考画像は埋め込みタグを用いたもの)
   

利用できるプラン

EnterpriseプランとProfessionalプラン, Basicプランでご利用いただけます。
プラン概要についてはこちらをご覧ください。
https://cms.spearly.com/features/imageflux

※ プラン変更時の既存のImagefluxの効果について
プランを変更する際、すでに効果のかけられているコンテンツについては影響はなく、効果が適応されたままです。編集や新たな新規画像への効果適応はできません。

ImageFlux効果一覧

効果は複数項目について重ねがけすることが可能です。
画像の「効果を追加する」から効果一覧を確認できます。

画像の大きさや回転

幅や高さを指定した、画像の拡大縮小や、画像の回転や反転などの効果を指定できます。

幅

スケーリング後の幅をピクセル単位で指定できます。
クリッピングなどの効果を反映した画像幅を指定でき、元の画像より拡大する場合は「画像拡大許可」を有効化してください。
ImageFlux 画像変換パラメータリファレンス: https://console.imageflux.jp/docs/image/conversion-parameters#scaling

高さ

スケーリング後の高さをピクセル単位で指定できます。
クリッピングなどの効果を反映した画像幅を指定でき、元の画像より拡大する場合は「画像拡大許可」を有効化してください。
ImageFlux 画像変換パラメータリファレンス: https://console.imageflux.jp/docs/image/conversion-parameters#scaling

回転・反転

画像を回転・反転させる。
画像は90度ごとに回転できます。
ImageFlux 画像変換パラメータリファレンス: https://console.imageflux.jp/docs/image/conversion-parameters#rotation

アスペクトモード

「幅」と「高さ」を設定しているときに、出力画像のアスペクトモードを設定できます。
以下の4つから選択できます。

• 入力のアスペクト比に合わせ、出力の幅、高さにおさめる(scale)
• 入力のアスペクト比を無視し、出力の幅、高さに合わせる(force-scale)
• 出力を満たすように入力を拡大・縮小し、はみだした領域を切り取る(crop)
• 入力のアスペクト比に合わせ、埋まらない部分を背景色で埋める(pad)

ImageFlux 画像変換パラメータリファレンス: https://console.imageflux.jp/docs/image/conversion-parameters#アスペクトモードの指定

背景色

「アスペクトモード」で「入力のアスペクト比に合わせ、埋まらない部分を背景色で埋める(pad)」を指定した場合の背景色を指定できます。
背景色は「16進数の6桁で指定: 24ビットRGB値 (RRGGBB)」、もしくは「8桁で指定: 32ビットRGBA値 (RRGGBBAA)」で指定できます。
ImageFlux 画像変換パラメータリファレンス: https://console.imageflux.jp/docs/image/conversion-parameters#背景色の指定

原点指定

「アスペクトモード」で「入力のアスペクト比を無視し、出力の幅、高さに合わせる(force-scale)」「出力を満たすように入力を拡大・縮小し、はみだした領域を切り取る(crop)」を指定した場合の原点を指定できます。
原点の位置は「左上, 上, 右上, 左, 中央, 右, 左下, 下, 右下」から選択できます。ImageFlux 画像変換パラメータリファレンス: https://console.imageflux.jp/docs/image/conversion-parameters#原点の指定

画像拡大許可

出力画像が入力画像より拡大されることを許可する、もしくは許可しないことを設定できます。
ファイルサイズの増加や拡大による画質の劣化を抑えるために入力画像のサイズよりも大きな画像を出力しないように制限できます。 これはブラウザやクライアントアプリケーションが自動的に拡大して表示してくれる場合に有効な機能です。
無効時は、入力画像の画像幅が上限になりますが、
有効時は、入力画像の画像幅を超えてサイズを指定できるようになります。
ImageFlux 画像変換パラメータリファレンス: https://console.imageflux.jp/docs/image/conversion-parameters#入力画像の拡大を制限

クリッピング

長方形の四辺の位置を指定して、画像をクリッピングできます。

指定サイズクリッピング

入力画像を指定したサイズに切り抜きます。(x1:y1:x2:y2)
「クリッピング原点」からの距離で４辺を設定し、長方形の形でクリッピングします。
(x1:y1:x2:y2)の値はピクセル単位で指定します。
ImageFlux 画像変換パラメータリファレンス: https://console.imageflux.jp/docs/image/conversion-parameters#clipping

指定サイズクリッピング(割合指定)

入力画像を指定したサイズに切り抜きます。 (割合で指定)
「指定サイズクリッピング」と同時に使用できません。
「クリッピング原点」からの距離の割合で4辺を設定し、長方形の形でクリッピングします。
(x1:y1:x2:y2) = 25%:25%:75%:75%で指定したい場合は、 (x1:y1:x2:y2) = 0.25:0.25:0.75:0.75のように少数の割合で設定します。
ImageFlux 画像変換パラメータリファレンス: https://console.imageflux.jp/docs/image/conversion-parameters#clipping

クリッピング原点

「指定サイズクリッピング」と「指定サイズクリッピング(割合指定)」で入力画像を切り抜く領域の原点を指定できます。
原点の位置は「左上, 上, 右上, 左, 中央, 右, 左下, 下, 右下」から選択できます。ImageFlux 画像変換パラメータリファレンス: https://console.imageflux.jp/docs/image/conversion-parameters#clipping

指定サイズクリッピング(拡大縮小後)

「幅」や「高さ」を用いた拡大縮小後の出力画像を指定したサイズに切り抜きます。 (x1:y1:x2:y2)
「クリッピング原点」からの距離で４辺を設定し、長方形の形でクリッピングします。
(x1:y1:x2:y2)の値はピクセル単位で指定します。
ImageFlux 画像変換パラメータリファレンス: https://console.imageflux.jp/docs/image/conversion-parameters#clipping

指定サイズクリッピング(拡大縮小後)

「幅」や「高さ」を用いた拡大縮小後の出力画像を割合で指定したサイズに切り抜きます。
「指定サイズクリッピング(拡大縮小後)」と同時に使用できません。
「クリッピング原点」からの距離の割合で4辺を設定し、長方形の形でクリッピングします。
(x1:y1:x2:y2) = 25%:25%:75%:75%で指定したい場合は、 (x1:y1:x2:y2) = 0.25:0.25:0.75:0.75のように少数の割合で設定します。
ImageFlux 画像変換パラメータリファレンス: https://console.imageflux.jp/docs/image/conversion-parameters#clipping

クリッピング原点(拡大縮小後)

「指定サイズクリッピング(拡大縮小後)」と「指定サイズクリッピング(拡大縮小後)(割合指定)」の拡大縮小後の出力画像を切り抜く領域の原点を指定できます。
原点の位置は「左上, 上, 右上, 左, 中央, 右, 左下, 下, 右下」から選択できます。ImageFlux 画像変換パラメータリファレンス: https://console.imageflux.jp/docs/image/conversion-parameters#clipping

フィルター

ぼかしや明度など、画像に効果を適用できます。

ぼかし（ブラー）

ガウシアンぼかしを適用できます。
ぼかし半径をピクセル単位で、標準偏差を少数で指定できます。
標準偏差は、そのぼかしのばらつきの度合いを指定できる値です。
ImageFlux 画像変換パラメータリファレンス: https://console.imageflux.jp/docs/image/conversion-parameters#ブラー

グレースケール

指定された割合(%)に応じて、彩度を落としてグレースケール化できます。
0で無変換、100で完全なグレースケールとなります。
ImageFlux 画像変換パラメータリファレンス: https://console.imageflux.jp/docs/image/conversion-parameters#グレースケール化

セピア

指定された割合(%)に応じて、彩度を落とした上でセピア風に変換できます。
0で無変換、100で完全なセピア風となります。
ImageFlux 画像変換パラメータリファレンス: https://console.imageflux.jp/docs/image/conversion-parameters#セピア風

明度

画像の明度を指定された比(%)で変更します。0で完全な黒、100で無変換となる。100より大きい値を指定すると元画像より明るくなる
ImageFlux 画像変換パラメータリファレンス: https://console.imageflux.jp/docs/image/conversion-parameters#ブライトネス

コントラスト

画像のコントラストを指定された比(%)で変更できます。
0で完全なグレー、100で無変換となります。100より大きい値を指定すると元画像よりコントラストが強調されます。
ImageFlux 画像変換パラメータリファレンス: https://console.imageflux.jp/docs/image/conversion-parameters#コントラスト

反転

画像をネガポジ反転できます
ImageFlux 画像変換パラメータリファレンス: https://console.imageflux.jp/docs/image/conversion-parameters#ネガポジ反転

画像種類の変換

画像フォーマット

出力する画像フォーマットを指定できます。

指定できるフォーマットは以下の 9 通りです。

• 入力画像と同じフォーマット
• JPEG
• PNG
• GIF
• WebP
• auto: WebP(クライアントが対応していない場合入力画像と同じフォーマット
• jpg: WebP(クライアントが対応していない場合JPEG
• png: WebP(クライアントが対応していない場合PNG
• gif: WebP(クライアントが対応していない場合GIF

ImageFlux 画像変換パラメータリファレンス: https://console.imageflux.jp/docs/image/conversion-parameters#output