Developer's Blog
画像ツールの裏側・実装解説
すべてのツールはブラウザ内で完結し、サーバーへ画像を送信しません。
入力をどう準備し、加工し、保存するか。実際のコードと作例から、WASMやCanvas APIの使い方、サイズ制限、実装上の判断を解説します。制作時の不具合や試行は、確認できた結果と残った問題を分けて掲載しています。
制作でつまずいたところから読む
- PCでは変わる加工が、スマホでは変わらなかった — スライダーの操作、Canvasの描画、保存結果を分けて確認する。
- MediaPipeのモデル取得と初期化で止まった — SDK・WASM・モデルの取得エラーと、後続版の動作報告を追う。
- 美肌加工で、鼻の穴までぼけてしまった — 動くだけでなく、残したい顔の形と仕上がりを確認する。
作りたい処理から、制作上の判断を読む
APIの呼び方を知った次は、写真や端末が変わったときにも使える仕組みを考えます。このサイトで採用した処理と制約を、次の例から追えます。
- 顔モザイク:検出結果を画像加工へ渡す
顔を探す処理と、見つかった範囲を隠す処理を分けます。モザイク画像を繰り返し描く工夫と、AIの検出漏れを人が確認する必要性を読みます。 - 画像圧縮:目標容量と画質の両立を考える
画像を書き出した後の容量を調べ、品質や寸法を調整します。設定値だけで容量が決まるわけではないため、実際の出力を確認する流れが必要です。 - 画像結合:並べた後の全体サイズを制限する
個々の写真だけでなく、結合後のCanvasも長辺3000 px・900万画素以内に収めます。余白や区切り線を含むレイアウトを計算した後に、全体を縮小する理由を確認します。
実装の確認日:2026年10月12日。掲載作例の記録と、現在のコードで確認した仕様は各記事で区別しています。AI生成の人物と、運営者の愛猫の写真を使った作例から結果を確かめられます。
🪪 証明写真・書類ツール
8 記事 📄 履歴書写真作成
ブラウザ完結型画像処理と、印刷用Canvasグリッドレンダリング
🪪 マイナンバー写真作成
マイナンバー写真生成の仕組み:CSSガイドとCanvas配置
🛂 免許証写真作成
運転免許証写真をCSSガイドとCanvasで配置する仕組み
🌍 パスポート写真作成
パスポート写真の切り抜きとCanvasによる印刷用配置
✈️ ビザ写真作成
登録した写真寸法をピクセルへ変換する キャンバス演算の裏側
✂️ L判 分割プリント
Canvasで実現する「Object-Fit: Cover」と精密なグリッド生成
📕 複数画像をPDFに
クライアントサイドで完結させる 画像PDF変換の最適化戦略
✍️ 手書き電子サイン作成
Canvas座標の補正とマウス・タッチの描画処理
🛡️ プライバシー・情報隠し
6 記事✂️ 画像の調整・切り抜き
7 記事 🪄 背景を一瞬で消す
AI
AI背景透過と手動補正を 支える「マスクレイヤー」戦略
🗂️ 顔だけ一括切り出し保存
AI
WASMによる高速顔認識と 正規化座標によるCanvas操作の最適化
✂️ 背景透明化
ブラウザだけで完結する 背景切り抜き実装のハック
🔄 画像形式変換(→JPG)
ブラウザ内画像変換の パイプライン設計とメモリ最適化
📉 サイズ指定圧縮
容量収束アルゴリズムと ブラウザ内HEIC変換の舞台裏
🖼️ 画像の比較・連結
「比率の自動補正」と「Canvasレイアウトエンジン」の設計
📏 アスペクト比計算
ユークリッドの互除法と許容誤差を用いた「直感的なアスペクト比判定」の仕組み
🛍️ SNS・フリマ・ブログ用
10 記事 🏷️ メルカリ売れる文字入れ
Canvas座標変換と動的スケーリングによる「高品質バナー生成」の自動化
🔆 背景飛ばし(白レベル)
背景を「白く飛ばす」ロジックの裏側:レベル補正とCanvas高速プレビューの共存
📸 インスタ正方形・白枠
サーバーレスで実現する「見切れない」画像加工の実装ロジック
🔲 インスタ用グリッド分割
グリッド分割の数学:クライアントサイドで実現する正確な画像切り出し
🐦 X(旧Twitter)縦長サムネ
黄金角サンプリングによる高品質ブラーと二段階描画の最適化
🎨 ブログ用アイキャッチ
Canvasで実現する「プロ風」デザインの自動化とリソース最適化
📐 SNSヘッダー切り抜き
ヘッダーカッターの実装:寸法プリセットと端末内の画像処理
🏷️ オシャレな値札作成
Canvas座標変換と動的スケーリングによる「自由なレイアウト合成」の実装
💻 はめ込みモックアップ
Canvasを用いたはめ込み合成と入力画像の縮小
✒️ 透かし文字合成
ブラウザ完結型ウォーターマーク合成の裏側:文字のタイル配置と描画サイズの制御
💄 人物・自撮りレタッチ
9 記事 🙂 微笑み補正
AI
AI微笑み補正:バイリニア補間リキッド処理による自然な表情変形
🪞 左右対称顔メーカー
AI
数式で導く完全なシンメトリー。 AI左右対称顔合成のロジック
📏 おでこの広さ測定器
AI
写真上の基準線から求める比率。 おでこ測定AIの数理モデル
✨ すっぴん隠し・美肌
AI
AIすっぴん隠し:顔パーツのマスクと螺旋状の重ね描き
💆♀️ 小顔・輪郭シャープ
AI
AIが描く理想の曲線。 小顔補正を支えるグリッドワープの数学
👁️ 目力アップ・カラコン
AI
瞳の色を変える数学とAI:虹彩レタッチの仕組み
💄 ぴったりリップ試着
AI
AIバーチャルメイク:Canvasとブレンディングによる自然な質感の再現
💄 リップ&チーク
AI
バーチャルメイクの裏側:肌質を殺さない「多層ブレンディング」とAIパーツ認識
💇 ヘアカラー・シミュレーター
AI
ブラウザ完結型AIによる髪色認識と ピクセルブレンドの実装
✨ エモい・映え加工
16 記事 🌈 主役を際立たせる
AI
AIで「主役」を際立たせる:背景エフェクトの技術解剖
👶 赤ちゃんの手形デジタル保存
AI
AI手形風スタンプ:21点の座標から輪郭を描く技法
📅 エモい日付スタンプ
デジカメ特有の「光のにじみ」を Canvasで表現する
👴 100年前の古写真
Canvas合成モードと静的キャッシュによるレトロ質感の再現
🎞️ チェキ・ポラロイド風
Canvasによる「エモさ」の自動生成:比率制御と端末内完結処理の工夫
🎵 音楽プレイヤー風
音楽プレイヤー風画像の仕組み: Canvasで描く文字と再生バー
💬 エモい字幕合成
映画の「情緒」をCanvasで再現する: 動的タイポグラフィと描画最適化の裏側
🌈 虹の光・フレア合成
Canvas APIで実現する幻想的な光の表現:虹の光・フレア合成ツールの舞台裏
✏️ 手書きログ・スタンプ
Canvas上での柔軟なスタンプ描画とマルチデバイス座標変換
🎨 透けるカラーフィルター
Canvas合成モードによる質感表現と 解像度制御の最適化手法
🪞 鏡越し自撮り風
Canvasで実現する「鏡の反射」と回転対応のヒット判定
💡 電球色のフィルター
電球色の温もりをCanvasで再現する: 合成操作による高速画像処理
🌸 花びらの舞い(サクラ)
ベジェ曲線による花びら描画と キャッシュ戦略の最適化
🔴 特定の1色だけ残す
三次元ユークリッド距離によるRGBの色判定
✨ キラキラ・クロス加工
明るい画素に光の筋を重ねる: キラキラ・クロス加工の裏側
📖 雑誌の表紙レイアウト
Canvasでのタイポグラフィ制御と 座標変換の裏側
🤣 おもしろ・ネタ加工
13 記事 🌀 顔中心・魚眼レンズ効果
AI
全ピクセル走査をブラウザで回す 魚眼マッピングの最適化戦略
📺 テレビ風テロップ
Canvasで再現する「テレビ番組風」テロップの多重縁取りと座標変換
💬 吹き出しセリフ追加
Canvasで描く「動く吹き出し」: 座標計算とイベント処理の裏側
📹 監視カメラ風加工
監視カメラの質感を再現する Canvasエフェクトと描画最適化
⚔️ RPGステータス画面
CanvasによるRPGステータス画面の動的生成技術
📰 号外!新聞風
デジタルな画像を「紙」にする: ノイズ生成と日本語レイアウトの実装術
🌡️ サーモグラフィ風
輝度を熱分布に変換する「疑似カラーマッピング」の技術的背景
📸 週刊誌の表紙風
週刊誌の「インパクト」を Canvasで動的に構築する
🎬 映画のエンディング風
ピクセル操作によるシネマ風の色とクレジットの文字サイズ調整
💥 漫画風 集中線
漫画の迫力をブラウザで再現する: 集中線描画とピクセル操作の裏側
📱 あの頃のガラケー画質
情報の欠落を「美しさ」に変える、意図的な劣化アルゴリズム
👤 匿名インタビュー風
ピクセル輝度解析と縦書きCanvas描画の裏側
☔ 窓際族・雨の車窓
Canvasで描く「叙情的な雨」と 軽量ブラーのハック
🎨 アート・特殊変換
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コードの誤り訂正と中央アイコンを合成する仕組み
📠 スキャン風フィルタ