猫の手ツール

Developer's Blog

画像ツールの裏側・実装解説

すべてのツールはブラウザ内で完結し、サーバーへ画像を送信しません。 入力をどう準備し、加工し、保存するか。実際のコードと作例から、WASMやCanvas APIの使い方、サイズ制限、実装上の判断を解説します。制作時の不具合や試行は、確認できた結果と残った問題を分けて掲載しています。

制作でつまずいたところから読む

作りたい処理から、制作上の判断を読む

APIの呼び方を知った次は、写真や端末が変わったときにも使える仕組みを考えます。このサイトで採用した処理と制約を、次の例から追えます。

実装の確認日:2026年10月12日。掲載作例の記録と、現在のコードで確認した仕様は各記事で区別しています。AI生成の人物と、運営者の愛猫の写真を使った作例から結果を確かめられます。

🪪 証明写真・書類ツール

8 記事

🛡️ プライバシー・情報隠し

6 記事

✂️ 画像の調整・切り抜き

7 記事

🛍️ SNS・フリマ・ブログ用

10 記事

💄 人物・自撮りレタッチ

9 記事

✨ エモい・映え加工

16 記事
🌈 主役を際立たせる AI

AIで「主役」を際立たせる:背景エフェクトの技術解剖

👶 赤ちゃんの手形デジタル保存 AI

AI手形風スタンプ:21点の座標から輪郭を描く技法

📅 エモい日付スタンプ

デジカメ特有の「光のにじみ」を Canvasで表現する

👴 100年前の古写真

Canvas合成モードと静的キャッシュによるレトロ質感の再現

🎞️ チェキ・ポラロイド風

Canvasによる「エモさ」の自動生成:比率制御と端末内完結処理の工夫

🎵 音楽プレイヤー風

音楽プレイヤー風画像の仕組み: Canvasで描く文字と再生バー

💬 エモい字幕合成

映画の「情緒」をCanvasで再現する: 動的タイポグラフィと描画最適化の裏側

🌈 虹の光・フレア合成

Canvas APIで実現する幻想的な光の表現:虹の光・フレア合成ツールの舞台裏

✏️ 手書きログ・スタンプ

Canvas上での柔軟なスタンプ描画とマルチデバイス座標変換

🎨 透けるカラーフィルター

Canvas合成モードによる質感表現と 解像度制御の最適化手法

🪞 鏡越し自撮り風

Canvasで実現する「鏡の反射」と回転対応のヒット判定

💡 電球色のフィルター

電球色の温もりをCanvasで再現する: 合成操作による高速画像処理

🌸 花びらの舞い(サクラ)

ベジェ曲線による花びら描画と キャッシュ戦略の最適化

🔴 特定の1色だけ残す

三次元ユークリッド距離によるRGBの色判定

✨ キラキラ・クロス加工

明るい画素に光の筋を重ねる: キラキラ・クロス加工の裏側

📖 雑誌の表紙レイアウト

Canvasでのタイポグラフィ制御と 座標変換の裏側

🤣 おもしろ・ネタ加工

13 記事

🎨 アート・特殊変換

27 記事
👕 服の色だけチェンジ AI

服の明暗を使って色を重ねるブレンドの仕組み

👺 3Dデスマスクジェネレーター AI

AIが描く478の頂点。 3Dデスマスク生成の舞台裏

🌓 自然な影の職人さん AI

AI人物切り抜きと「自然な影」を両立する描画ハック

🎮 ネオン光彩フチ取り君 AI

ブラウザで実現する「光る太いフチ」の 高度な描画アルゴリズム

✂️ 雑誌のギザギザ切り抜き AI

AIのマスクへ紙の切り口を加える仕組み

🌏 好きな世界にワープ AI

ブラウザ完結型AI背景合成の技術解剖

💨 疾走感をだす AI

多重レイヤー合成による横方向ブラーの実装

🖊️ 手のポーズ線画生成 AI

イラスト資料を加速させる:21点のランドマークから線画を紡ぐアルゴリズム

🌸 背景・アニメ風変換ツール AI

人物マスクと背景の色加工:セグメンテーションとポスタリゼーション

✏️ 線画・塗り絵メーカー

Canvasで実現する輝度差を使った 線画抽出アルゴリズムの裏側

🖌️ 水彩画の滲み

デジタルに「にじみ」の体温を宿す: Canvas合成による水彩画シミュレーション

👾 ドット絵変換

クッキリした境界を作る「二段階描画」とレトロ配色のロジック

🎞️ ネガポジ・フィルム風

低レベルなピクセル操作で描く「シネマティック」と 高解像度処理を支える二重描画戦略

👘 浮世絵・役者絵

浮世絵風の見た目を作る、暗い領域の抽出と紙の質感の合成

💧 水滴のついたレンズ

Canvasで実現する「エモい」質感。 モバイル向け最適化と独自ブラー

🌊 水面の波紋

数学的に「揺らす」: ピクセル置換による波紋の再現

🧶 刺繍・クロスステッチ風

グリッド・サンプリングと 幾何学的な刺繍再現技術

🖍️ チョークの落書き

Canvasによるチョーク質感の再現と 描画最適化のテクニック

📼 VHSノイズ・横縞

アナログの不完全さを計算で描く: VHSグリッチのピクセル操作術

✉️ 古い手紙(インク滲み)

写真をインクに「刷り込む」ための レイヤー合成テクニック

🗳️ 選挙ポスター風

選挙ポスターの「記号性」を ブラウザCanvasで動的に構築する

🔭 望遠鏡の視界(円形)

Canvas 2Dで実現する「レンズ内の拡大」とレスポンシブ座標変換の舞台裏

🎨 カラーパレット抽出

ピクセル量子化と色差判定による 代表色抽出の最適化手法

💧 ピンポイント色抽出

座標スケーリングとピクセル抽出の最適化手法

🖋️ 手書き&ハンコ透過

輝度判定とアルファ補間で作る背景透過スタンプ

🔳 アイコン入りQR作成

QRコードの誤り訂正と中央アイコンを合成する仕組み

📠 スキャン風フィルタ

ブラウザ完結で実現する 高速スキャン風・2値化アルゴリズム

☕ ほっと一息

3 記事