福野泰介の一日一創

意外と気になる写真の傾き。新社屋の写真が、ちょっと傾いていて直したいけど、そのために起動に時間がかかる画像編集ソフトを開くのは億劫。画像の回転自体はCSSで簡単にできるので、さっとHTMLを1ファイル作って修正。今回、せっかくなのでツール化して公開。

「imgrotate」src on GitHub
画像ファイルをドロップして、レンジを動かせば左右に傾きます（キーボード操作で微調整可）。OS付属のキャプチャー機能を使って画像保存することを想定した、最低限機能。サンプル写真は、ピクセル表現したjig新社屋前の車椅子マーク designed by TSUGI。

シンプルなオープンソースなので、必要に応じて、機能追加いただけます！

画像回転のCSSはこちら

img.style.transform = `rotate(${th}deg)`;

画像ファイルがドロップされたときの処理用のライブラリはこちら

import { setDropImageFileListener } from "https://js.sabae.cc/setDropImageFileListener.js"; setDropImageFileListener(document.body, async (img) => { imgc.innerHTML = ""; imgc.appendChild(img); });

AI物体検出アプリを作るときに作ったライブラリが役立ちました！

必要なものが無い時、探すか作るかの選択に迫られます。
作る選択をして、オープンソースとしておく度に、開発効率が上がります。