壁紙にブラー&スマホとピッタリサイズにするWEBサービス『picrop』

1

好きな画像にiOS7のようなブラー(すりガラス)加工をしたり、様々なデバイスとピッタリサイズにトリミングできるWEBサービス『picrop』を公開しました。IE9では動きませんがスマホ含む殆どのブラウザで動作します。

トリミングでは拡大縮小や回転が直感的にできます。ブラー効果のほか、背景色と透明度を組み合わせることで簡易的な色調補正もできます。

スポンサーリンク

 

使い方

最初に目的の端末を選びます。たとえばiPhone5だと

2

iPhone 5ノーマル640×1136
iPhone 5iOS7 視差効果を減らす オン744×1392
iPhone 5iOS7 視差効果を減らす オフ1040×1536

の3種類から選べます。iOS7の『視差効果を減らす』をオンオフした場合を含む計3つとなります。

Androidの壁紙サイズはちょっと特殊で、ホーム画面が横スクロールするので端末の横サイズの倍が標準サイズとなります。

3

 

端末と解像度を選択したら次は画像を読み込みます。サンプル画像もあります。ファイルセレクトのほかドラッグ&ドロップにも対応しています。

4

 

読み込まれた画像は画像を上下左右4つに区分した機能に分かれます。

5

 

下にあるBlurとOpacityは、それぞれぼかしと透明度です。透明度と背景色を上手に組み合わせることで簡易的な色調補正もができます。

6

 

最後にCROP!を押せば新しいウィンドウに画像が出力されるので保存してください。ファイル書き出しにCanvas+Data URLを利用しているため、あまり大きなサイズはブラウザが処理できない場合があります。その場合はブラウザを変えてお試しください。

1

 

picrop – 壁紙をスマホやPCとピッタリサイズに変換!ピックロップ

 

技術的なところ

最初はブラーだけのシンプルなWEBアプリになる予定でしたが、画像にブラーを適応すると画像の四方がぼけて丸まってしまうので、それには適度な拡大が同時に必要になるし、ならばいっそクロッピングもGUIで。という発想から生まれました。

壁紙をスマホに設定するときに自由に拡大縮小もできるので、そういった意味で需要がない気もしますが、ブラーが出発点だったのでクロッピングはどちらかと言えばおまけです。

KineticJS+File APIで動作しています。KineticJSの力が大きいです。ブラウザのリサイズにあわせてキャンバスも動的に追従するあたりがコダワリです。

出来るだけサーバーに画像をアップすることなくブラウザのみで動作させることが一つの試みでした。画像の加工にGDやImageMagickを使った方が綺麗になるかと思いましたが、品質にそれほど変化がなかったのでレンダリングもブラウザで行っています。

picrop - 壁紙をスマホやPCとピッタリサイズに変換!ピックロップ

 

 

スポンサーリンク