2020年2月14日すぐ分かる!sharp(node.js)で画像を編集する実例・全35件さてさて、私事ですが高速処理に向いているNode.jsのフレームワーク「Express」の開発をはじめてから少し時間が経ち、徐々に慣れてきた感じがしています(やはり高速レスポンスの噂はホントでした😊)そして、他の開発でもやっていた複雑な内容も少しずつ取り入れている最中なのですが、やはりと言うかサイト開発をすすめる上で、避けては通れない機能に遭遇しました。Image(PHP)で画像を編集する全実例」でご紹介しましたが、実はNode.jsにも同じような画像編集パッケージがあったりします。その名も「sharp」です。いうことで、今回はこの「sharp」の使い方を実例を使って紹介していきたいと思います。合わせて読みたいインストールするまずはパッケージをインストールします。以下のコマンドを実行してください。sharp※ちなみにこのパッケージはlibvipsというライブラリを使うようで、インストール時にダウンロードし、コンパイルをします。そのため、もしかすると少し時間がかかるかもしれません。(C++11が必要)では、以下の2画像を使って各機能を紹介していきます。横360ピクセル)基本的な使い方パッケージを読み込むsharpパッケージを読み込むには以下のようにします。require('sharp');画像を読み込む:コンストラクタ画像を読み込む場合は以下のようにします。sharp('sharp_smile.png');※なお、引数は画像のパスだけでなくBufferデータでもOKです。画像を保存する画像を保存する場合はtoFile()を使います。});なお、画像の保存が成功したときに取得できるinfoは以下のような内容になっています。pngなど)が明確でない場合は拡張子から推測して自動的にフォーマットが変換されることになります。※Exifなどの画像データは全て削除された状態です。元画像のデータを引き継ぎたい場合はwithMetadata()を併用してください。画像を編集するリサイズ:resize()シンプルな使い方もっとも簡単にリサイズするには、第1引数と第2引数にそれぞれ横幅と縦幅をセットします。height)ただし、縦横比が元画像と違う場合は以下のようにカットされてしまいます。縦か横を基準にして自動的に計算してほしい場合はnullを使います。縦を基準に横を自動計算この場合は、どちらも以下のようになります。画像が歪ませてリサイズ例えば、強制的に横を200px、縦を100pxにしてリサイズする場合です。'fill'})結果はこうなります。画像の縦横比は変更せず(画像を歪ませず)、画像のサイズは指定したものにしたい場合です。横の短い方に合わせてリサイズ元画像の縦横比はそのままで、「短い方」を基準にしてリサイズする方法です。※縦の100pxの方が短いので100pxになっています。横の長い方に合わせてリサイズ元画像の縦横比はそのままで、「長い方」を基準にしてリサイズする方法です。※横の200pxの方が長いので200pxになっています。画像がカットされる基準を上下左右で指定する例えば、オプションのfitをcontainにすると画像が以下のようになりますが、この基準を上下左右どこからにするか指定する場合です。使えるパラメーターは以下の4つです。toprightbottomleftでは、例として左を基準にしてみましょう。'left'})実際の例はこうなります。leftなどとして2つ指定することもできます。背景色を指定するfitがcontainの場合、デフォルトでは以下のように空白の部分は色が黒になりますが、例えばこれを赤に変更したい場合です。'#ff0000'})結果はこうなります。RGBAで指定する場合はこちら。}})余白をつける元画像の周りに余白をつけてリサイズしたい場合です。余白を色を基準にして削除する例えば、元画像のまわりにある余白を自動で削除する場合です。余白エリアは画像の一番上&一番左の色(今回は白)が基準になります。元画像より大きくならないようにする例えば、元画像が256x256ピクセルの場合で、これよりもサイズを大きくしないようにリサイズする場合です。true});元画像が256x256ピクセルなので、この場合サイズの変化はありません。基準の場所から指定のサイズを切り出す例えば、上20px・左10pxの位置から横100px、縦80pxを切りだす場合です。areaというようなエラーになるので気をつけてください。画像を回転させる:rotate()例えば、画像を30度右回転させる場合です。マイナスの数字もOK!結果はこうなります。背景色を変更する場合は以下のようにします。}});画像を反転させる縦方向に反転:flip()鏡に写したように「縦」に画像を反転する場合です。横方向に反転:flop()鏡に写したように「横」に画像を反転する場合です。sharpen()画像をより鮮明に際立たせる場合です。※パラメーターは省略可です。ぼかしをかける通常のぼかしをかける:blur()image.blur(5);元画像はこちら。油絵のようなぼかし(ミディアンブラ−)をかける:median()image.median(15);元画像はこちら。※元画像は透過しています。3);元画像はこちら。※パラメータは省略可です。色を反転させる(ネガポジ反転):negate()image.negate();元画像はこちら。ノーマライズ処理をする:normalise()image.normalise();元画像はこちら。(分かりやすくするために明るく調整しています)結果はこうなります。1]});元画像はこちら。しきい値を使って色を変更する:threshold()例えば、指定したしきい値100以上の色は255、それ以外は0にする場合です。image.threshold(100);元画像はこちら。初期状態では白黒になりますが、以下のようにすると色付きのままで処理ができます。'and');例えば、以下の2枚の画像にビット演算をかけます。b);元画像はこちら。0.0912],]);元画像はこちら。100});元画像はこちら。ウォーターマーク(ロゴ)をつける例えば、写真の中にロゴを上から重ねた画像を作りたい場合です。}]);結果はこうなります。画像形式を変換する例えば、画像をpng形式に変換する場合です。image.toFormat('png');利用できるパラメータは以下のとおりです。jpgjpegpngwebptiffheicheifrawです。以下のように第2引数でオプションも利用することができます。全てのオプションはこちらのページをご覧ください。true});バッファ形式に変換するimage.toBuffer();画像のデータを取得するメタデータを取得する:metadata()例えば、画像の縦横の幅や形式を取得する場合です。});取得されるデータは以下のようになります。});例えば、以下のようなデータが取得できます。.toFile('new_smile.jpg');おわりにということで今回は画像ライブラリ「sharp」の使い方をご紹介しました。Node.jsでも気軽に画像を回転したり反転させることができるので、とても便利かと思います。テキストの追加機能などGitHubのIssueでも要望があるようですが、まだ実装がないようですので、それほど新機能の追加は積極的ではないのかな??とも感じました。(ただし、この記事を書いている時点で1ヶ月以内に複数のアップデートがあるようでしたので、メンテナンス自体はきっちり行われているようです)ぜひ皆さんも「sharp」を使って画像編集をしてみてくださいね。開発スキルプログラム開発は15年以上。Laravel、Vue.jsをメインとしてPython(機械学習)やElectronの開発もお引き受けしております。過去2度カナダのバンクーバーに滞在していました。開発状況によりましては開発をお待ちいただく可能性がございますが、いつでもご相談は受けさせていただいております。お気軽にご連絡ください!お問い合わせフォーム開発してほしい機能を募集中!MITライセンスで公開します。詳しくはこちらの記事をご覧ください。ぷれりり・プレスリリース掲載無料のプレスリリース・スタンド!播磨孤道(はりまこどう)兵庫周辺のゆったり自転車一人旅の記事を書いていきます。