feat(issue-045): Canvas aspect sync + data scaling + export fixes\n\n- Canvas display follows output aspect (long-side 640)\n- Align poseData resolution to output form on load\n- Keep JS->Python resolution sync; fix background fit\n- Export uses declared resolution; safe fallback\n\nClose: issue_045_キャンバスサイズ動的更新機能実装.md

app.py

@@ -142,6 +142,11 @@ def main():
                         scale=1,
                         min_width=100
                     )
+                # サイズ適用ボタン（手動更新トリガー）
+                canvas_update_btn = gr.Button(
+                    "画像サイズのUpdate", 
+                    variant="secondary"
+                )
                 
                 # ポーズ画像出力（非表示）
                 output_image = gr.Image(
@@ -234,17 +239,42 @@ def main():
                     _current_frame_index = 0
                     print(f"[DEBUG] ✅ グローバル変数更新完了（画像アップロード・refs互換）")
                 
-                # 🎨 背景画像をポーズデータに含める
+                # 🎨 背景画像をポーズデータに含める（元画像をそのまま）
                 image_base64 = image_to_base64(image)
                 pose_result['background_image'] = image_base64
                 
-                return pose_result, pose_result, gr.update()
+                # 🔧 Issue045: 参考画像サイズに合わせてCanvas/出力サイズを更新
+                try:
+                    # original_size: (width, height)
+                    data_w = int(original_size[0]) if original_size else 512
+                    data_h = int(original_size[1]) if original_size else 512
+                    # Canvas表示サイズ（希望の出力サイズ）
+                    new_w = max(64, min(2048, data_w))
+                    new_h = max(64, min(2048, data_h))
+                    # 重要: pose_result['resolution'] は検出結果そのまま（座標系）を保持し、JS側でスケールする
+                    # Python側のメタは検出のまま（_current_poses 作成時に設定済み）
+                except Exception:
+                    data_w, data_h = 512, 512
+                    new_w = 512
+                    new_h = 512
+
+                # JSでCanvasとデータを新サイズへスケール（左寄り防止のため）
+                js_code = f"setTimeout(() => updateCanvasResolution({new_w}, {new_h}), 100);"
+                
+                return (
+                    pose_result,                     # output_json
+                    pose_result,                     # pose_data
+                    gr.update(value=f"<script>{js_code}</script>"),  # js_executor (canvas表示は正方形)
+                    gr.update(value=new_w),         # 出力幅（データ解像度）
+                    gr.update(value=new_h)          # 出力高さ（データ解像度）
+                )
             else:
                 print(f"[DEBUG] ❌ Pose detection failed")
-                return None, {}, gr.update()
+                return None, {}, gr.update(), gr.update(), gr.update()
         
         def on_canvas_size_update(width, height):
             """Canvas解像度更新"""
+            global _current_poses, _current_frame_index
             try:
                 width = int(width) if width else 512
                 height = int(height) if height else 512
@@ -256,6 +286,13 @@ def main():
                 # 座標系更新
                 update_coordinate_system((width, height), (640, 640))
                 
+                # Python側のメタ解像度も更新（エクスポート整合性）
+                try:
+                    if _current_poses and 0 <= _current_frame_index < len(_current_poses):
+                        _current_poses[_current_frame_index]['metadata']['resolution'] = [width, height]
+                except Exception:
+                    pass
+
                 # JavaScript側でCanvas更新
                 js_code = f"updateCanvasResolution({width}, {height});"
                 
@@ -357,15 +394,33 @@ def main():
                         'is_template_load': True  # テンプレート読み込みフラグ
                     }
                     
+                    # 🔧 Issue045: テンプレートは常に512x512へ
+                    target_w, target_h = 512, 512
+                    # Python側メタも512固定に
+                    try:
+                        if _current_poses and 0 <= _current_frame_index < len(_current_poses):
+                            _current_poses[_current_frame_index]['metadata']['resolution'] = [target_w, target_h]
+                    except Exception:
+                        pass
+
+                    # JS実行とUIサイズ反映
+                    js_code = f"setTimeout(() => updateCanvasResolution({target_w}, {target_h}), 100);"
+
                     notify_success(f"{template_name}を読み込みました")
-                    return people_format_data, people_format_data
+                    return (
+                        people_format_data,                 # output_json
+                        people_format_data,                 # pose_data
+                        gr.update(value=f"<script>{js_code}</script>"),  # js_executor
+                        gr.update(value=target_w),          # canvas_width
+                        gr.update(value=target_h)           # canvas_height
+                    )
                 else:
                     notify_error("テンプレートが見つかりません")
-                    return None, {}
+                    return None, {}, gr.update(), gr.update(), gr.update()
                     
             except Exception as e:
                 notify_error(f"テンプレート読み込みに失敗しました: {str(e)}")
-                return None, {}
+                return None, {}, gr.update(), gr.update(), gr.update()
         
         def export_image(pose_data, draw_hand, draw_face, width, height):
             """ポーズ画像をエクスポート（Button + File方式）（refs互換・マルチフレーム管理）"""
@@ -577,6 +632,12 @@ def main():
                         # 現在のフレームのpeopleデータを更新（refs互換）
                         if 0 <= _current_frame_index < len(_current_poses):
                             _current_poses[_current_frame_index]['people'] = [pose_data]
+                            # 🔧 JS側で解像度が更新されている場合はmetadataにも反映
+                            try:
+                                if 'resolution' in canvas_data and isinstance(canvas_data['resolution'], list):
+                                    _current_poses[_current_frame_index]['metadata']['resolution'] = canvas_data['resolution']
+                            except Exception:
+                                pass
                             print(f"[DEBUG] 🎯 フレーム{_current_frame_index}のpeopleデータ更新完了")
                         else:
                             # フレームが範囲外の場合は追加
@@ -648,7 +709,7 @@ def main():
             global _current_poses, _current_frame_index
             
             if file is None:
-                return None, {}
+                return None, {}, gr.update(), gr.update(), gr.update()
             
             try:
                 # ファイルを読み込む
@@ -690,10 +751,18 @@ def main():
                         
                         print(f"[DEBUG] ✅ people形式JSON読み込み完了（ハイブリッド形式）")
                         notify_success("people形式JSONファイルを読み込みました")
-                        return display_data, display_data
+                        # CanvasとデータをJSON内の解像度に合わせる
+                        js_code = f"setTimeout(() => updateCanvasResolution({int(canvas_width)}, {int(canvas_height)}), 100);"
+                        return (
+                            display_data,                     # output_json
+                            display_data,                     # pose_data
+                            gr.update(value=f"<script>{js_code}</script>"),  # js_executor
+                            gr.update(value=int(canvas_width)),          # 出力幅
+                            gr.update(value=int(canvas_height))          # 出力高さ
+                        )
                     else:
                         notify_error("無効なpeople形式データです")
-                        return None, {}
+                        return None, {}, gr.update(), gr.update(), gr.update()
                         
                 else:
                     # 従来のbodies形式（互換性維持）
@@ -734,14 +803,27 @@ def main():
                     
                     print(f"[DEBUG] ✅ bodies形式JSON読み込み・変換完了（ハイブリッド形式）")
                     notify_success("bodies形式JSONファイルを読み込みました（people形式に変換）")
-                    return hybrid_data, hybrid_data
+                    # 幅・高さを決定
+                    res = loaded_data.get('resolution', [512, 512])
+                    try:
+                        w = int(res[0]); h = int(res[1])
+                    except Exception:
+                        w, h = 512, 512
+                    js_code = f"setTimeout(() => updateCanvasResolution({w}, {h}), 100);"
+                    return (
+                        hybrid_data,                       # output_json
+                        hybrid_data,                       # pose_data
+                        gr.update(value=f"<script>{js_code}</script>"),
+                        gr.update(value=w),
+                        gr.update(value=h)
+                    )
                 
             except json.JSONDecodeError as e:
                 notify_error(f"JSONパースエラー: {str(e)}")
-                return None, {}
+                return None, {}, gr.update(), gr.update(), gr.update()
             except Exception as e:
                 notify_error(f"ファイル読み込みエラー: {str(e)}")
-                return None, {}
+                return None, {}, gr.update(), gr.update(), gr.update()
                 
         def convert_people_to_bodies_format(person_data, resolution):
             """people形式からbodies形��に変換（表示互換性用）"""
@@ -800,7 +882,7 @@ def main():
         input_image.change(
             fn=on_image_upload,
             inputs=[input_image],
-            outputs=[output_json, pose_data, js_executor]
+            outputs=[output_json, pose_data, js_executor, canvas_width, canvas_height]
         )
         
         # pose_data変更時にCanvas更新（重要！）- 無限ループ防止
@@ -835,7 +917,7 @@ def main():
         template_update_btn.click(
             fn=load_template_pose,
             inputs=[template_dropdown],
-            outputs=[output_json, pose_data]
+            outputs=[output_json, pose_data, js_executor, canvas_width, canvas_height]
         )
         
         # エクスポートイベント (refs互換DownloadButton方式)
@@ -862,11 +944,18 @@ def main():
         json_upload.change(
             fn=on_json_upload,
             inputs=[json_upload],
-            outputs=[output_json, pose_data]
+            outputs=[output_json, pose_data, js_executor, canvas_width, canvas_height]
+        )
+
+        # 手動解像度更新ボタン
+        canvas_update_btn.click(
+            fn=on_canvas_size_update,
+            inputs=[canvas_width, canvas_height],
+            outputs=[js_executor]
         )
         
     return demo
 
 if __name__ == "__main__":
     demo = main()
-    demo.launch()
+    demo.launch()

static/pose_editor.js

@@ -15,7 +15,7 @@ window.poseEditorGlobals = {
     isUpdating: false,
     // 🔧 表示・編集設定
     enableHands: true,
-    enableFace: true,
+    enableFace: false,
     editMode: "簡易モード",  // "簡易モード" or "詳細モード"
     // 🎨 背景画像機能
     backgroundImage: null,     // 背景画像オブジェクト
@@ -271,9 +271,12 @@ function updateDisplaySettingsFromCheckbox() {
 // マウス座標取得（refs互換）
 function getMousePos(event) {
     const rect = canvas.getBoundingClientRect();
+    // CSSピクセル → Canvas内部ピクセルへ正規化（非スクエア時のズレ解消）
+    const scaleX = canvas.width / rect.width;
+    const scaleY = canvas.height / rect.height;
     return {
-        x: event.clientX - rect.left,
-        y: event.clientY - rect.top
+        x: (event.clientX - rect.left) * scaleX,
+        y: (event.clientY - rect.top) * scaleY
     };
 }
 
@@ -302,8 +305,7 @@ function findNearestKeypoint(mouseX, mouseY, maxDistance = 20) {
     
     // 📐 解像度情報の取得
     const originalRes = currentPoseData.resolution || [512, 512];
-    const scaleX = canvas.width / originalRes[0];
-    const scaleY = canvas.height / originalRes[1];
+    const fit = getFitParams(originalRes);
     
     for (let i = 0; i < Math.min(20, candidates.length); i++) { // つま先込み20個
         const point = candidates[i];
@@ -311,9 +313,9 @@ function findNearestKeypoint(mouseX, mouseY, maxDistance = 20) {
         if (point && point[0] > 1 && point[1] > 1 && 
             point[0] < originalRes[0] && point[1] < originalRes[1]) {
             
-            // 座標変換を適用
-            const scaledX = point[0] * scaleX;
-            const scaledY = point[1] * scaleY;
+            // 座標変換を適用（アスペクト比維持 + オフセット）
+            const scaledX = fit.offsetX + point[0] * fit.scale;
+            const scaledY = fit.offsetY + point[1] * fit.scale;
             
             const distance = Math.sqrt((mouseX - scaledX) ** 2 + (mouseY - scaledY) ** 2);
             
@@ -336,8 +338,7 @@ function findNearestKeypointInDetailMode(mouseX, mouseY, maxDistance = 15) {
     }
     
     const originalRes = currentPoseData.resolution || [512, 512];
-    const scaleX = canvas.width / originalRes[0];
-    const scaleY = canvas.height / originalRes[1];
+    const fit = getFitParams(originalRes);
     
     let nearestKeypoint = null;
     let minDistance = maxDistance;
@@ -355,8 +356,8 @@ function findNearestKeypointInDetailMode(mouseX, mouseY, maxDistance = 15) {
             if (handData && handData.length > 0) {
                 for (let i = 0; i < handData.length; i += 3) {
                     if (i + 2 < handData.length) {
-                        const x = handData[i] * scaleX;
-                        const y = handData[i + 1] * scaleY;
+                        const x = fit.offsetX + handData[i] * fit.scale;
+                        const y = fit.offsetY + handData[i + 1] * fit.scale;
                         const conf = handData[i + 2];
                         
                         if (conf > 0.3) {
@@ -388,8 +389,8 @@ function findNearestKeypointInDetailMode(mouseX, mouseY, maxDistance = 15) {
             const faceData = facesData[0];
             for (let i = 0; i < faceData.length; i += 3) {
                 if (i + 2 < faceData.length) {
-                    const x = faceData[i] * scaleX;
-                    const y = faceData[i + 1] * scaleY;
+                    const x = fit.offsetX + faceData[i] * fit.scale;
+                    const y = fit.offsetY + faceData[i + 1] * fit.scale;
                     const conf = faceData[i + 2];
                     
                     if (conf > 0.3) {
@@ -414,8 +415,9 @@ function findNearestKeypointInDetailMode(mouseX, mouseY, maxDistance = 15) {
         const candidates = currentPoseData.bodies.candidate;
         const point = candidates[bodyKeypointIndex];
         if (point) {
-            const scaledX = point[0] * scaleX;
-            const scaledY = point[1] * scaleY;
+            const fit = getFitParams(currentPoseData.resolution || [512,512]);
+            const scaledX = fit.offsetX + point[0] * fit.scale;
+            const scaledY = fit.offsetY + point[1] * fit.scale;
             const distance = Math.sqrt((mouseX - scaledX) ** 2 + (mouseY - scaledY) ** 2);
             
             if (distance < minDistance) {
@@ -449,10 +451,9 @@ function findNearestKeypointInDetailMode(clickX, clickY) {
     
     if (currentPoseData && canvas) {
         const resolution = currentPoseData.resolution || [512, 512];
-        const scaleX = canvas.width / resolution[0];
-        const scaleY = canvas.height / resolution[1];
-        dataClickX = clickX / scaleX;
-        dataClickY = clickY / scaleY;
+        const d = canvasToDataXY(clickX, clickY, resolution);
+        dataClickX = d.x;
+        dataClickY = d.y;
     }
     
     // 体のキーポイント検索
@@ -716,13 +717,12 @@ function handleMouseDown(event) {
                 if (currentPoseData && currentPoseData.bodies && currentPoseData.bodies.candidate) {
                     const candidates = currentPoseData.bodies.candidate;
                     const originalRes = currentPoseData.resolution || [512, 512];
-                    const scaleX = canvas.width / originalRes[0];
-                    const scaleY = canvas.height / originalRes[1];
+                    const fit = getFitParams(originalRes);
                     
                     const point = candidates[keypointIndex];
                     if (point) {
-                        const keypointX = point[0] * scaleX;
-                        const keypointY = point[1] * scaleY;
+                        const keypointX = fit.offsetX + point[0] * fit.scale;
+                        const keypointY = fit.offsetY + point[1] * fit.scale;
                         
                         dragOffset = {
                             x: mousePos.x - keypointX,
@@ -747,12 +747,10 @@ function updateDetailKeypointPosition(detailKeypoint, canvasX, canvasY) {
     }
     
     const originalRes = currentPoseData.resolution || [512, 512];
-    const scaleX = canvas.width / originalRes[0];
-    const scaleY = canvas.height / originalRes[1];
-    
-    // Canvas座標をデータ座標に変換
-    const dataX = Math.max(0, Math.min(originalRes[0], canvasX / scaleX));
-    const dataY = Math.max(0, Math.min(originalRes[1], canvasY / scaleY));
+    // Canvas座標をデータ座標に変換（レターボックス対応）
+    const dataPt = canvasToDataXY(canvasX, canvasY, originalRes);
+    const dataX = dataPt.x;
+    const dataY = dataPt.y;
     
     switch (detailKeypoint.type) {
         case 'leftHand':
@@ -954,8 +952,8 @@ function transformKeypointsInRect(control, newMouseX, newMouseY) {
         dataResolutionHeight = currentPoseData.resolution[1];
     }
     
-    const coordScaleX = canvasWidth / dataResolutionWidth;
-    const coordScaleY = canvasHeight / dataResolutionHeight;
+    // レターボックス対応フィット
+    const fit = getFitParams([dataResolutionWidth, dataResolutionHeight]);
     
     // 9. 正規化座標かピクセル座標かを判定
     let isNormalized = false;
@@ -982,11 +980,13 @@ function transformKeypointsInRect(control, newMouseX, newMouseY) {
                 // データ座標→Canvas座標
                 let canvasX, canvasY;
                 if (isNormalized) {
-                    canvasX = (x * dataResolutionWidth) * coordScaleX;
-                    canvasY = (y * dataResolutionHeight) * coordScaleY;
+                    const dx = x * dataResolutionWidth;
+                    const dy = y * dataResolutionHeight;
+                    canvasX = fit.offsetX + dx * fit.scale;
+                    canvasY = fit.offsetY + dy * fit.scale;
                 } else {
-                    canvasX = x * coordScaleX;
-                    canvasY = y * coordScaleY;
+                    canvasX = fit.offsetX + x * fit.scale;
+                    canvasY = fit.offsetY + y * fit.scale;
                 }
                 
                 // 元矩形内での相対位置を計算
@@ -999,13 +999,13 @@ function transformKeypointsInRect(control, newMouseX, newMouseY) {
                 
                 // Canvas座標→データ座標に戻す
                 if (isNormalized) {
-                    const dataX = newCanvasX / coordScaleX;
-                    const dataY = newCanvasY / coordScaleY;
+                    const dataX = (newCanvasX - fit.offsetX) / fit.scale;
+                    const dataY = (newCanvasY - fit.offsetY) / fit.scale;
                     targetKeypoints[i] = dataX / dataResolutionWidth;
                     targetKeypoints[i + 1] = dataY / dataResolutionHeight;
                 } else {
-                    targetKeypoints[i] = newCanvasX / coordScaleX;
-                    targetKeypoints[i + 1] = newCanvasY / coordScaleY;
+                    targetKeypoints[i] = (newCanvasX - fit.offsetX) / fit.scale;
+                    targetKeypoints[i + 1] = (newCanvasY - fit.offsetY) / fit.scale;
                 }
             }
         }
@@ -1080,8 +1080,7 @@ function transformKeypointsDirectly(rectType, originalRect, newRect) {
         dataResolutionHeight = currentPoseData.resolution[1];
     }
     
-    const coordScaleX = canvasWidth / dataResolutionWidth;
-    const coordScaleY = canvasHeight / dataResolutionHeight;
+    const fit = getFitParams([dataResolutionWidth, dataResolutionHeight]);
     
     // 正規化/ピクセル/Canvas座標を判定（元データ優先で判定）
     let isNormalized = false;
@@ -1121,7 +1120,7 @@ function transformKeypointsDirectly(rectType, originalRect, newRect) {
         sampleCoord: { x: sampleX, y: sampleY },
         originalRect: { x: originalRect.x, y: originalRect.y, width: originalRect.width, height: originalRect.height },
         newRect: { x: newRect.x, y: newRect.y, width: newRect.width, height: newRect.height },
-        coordScale: { x: coordScaleX, y: coordScaleY },
+        fit: { scale: fit.scale, offsetX: fit.offsetX, offsetY: fit.offsetY },
         resolution: { data: dataResolutionWidth + 'x' + dataResolutionHeight, canvas: canvasWidth + 'x' + canvasHeight },
         keypointsLength: targetKeypoints.length
     });
@@ -1138,13 +1137,13 @@ function transformKeypointsDirectly(rectType, originalRect, newRect) {
                 let y = originalTargetKeypoints[i + 1];
                 let cx, cy;
                 if (isNormalized) {
-                    cx = (x * dataResolutionWidth) * coordScaleX;
-                    cy = (y * dataResolutionHeight) * coordScaleY;
+                    cx = fit.offsetX + (x * dataResolutionWidth) * fit.scale;
+                    cy = fit.offsetY + (y * dataResolutionHeight) * fit.scale;
                 } else if (isCanvasUnit) {
                     cx = x; cy = y;
                 } else {
-                    cx = x * coordScaleX;
-                    cy = y * coordScaleY;
+                    cx = fit.offsetX + x * fit.scale;
+                    cy = fit.offsetY + y * fit.scale;
                 }
                 minX = Math.min(minX, cx);
                 minY = Math.min(minY, cy);
@@ -1175,15 +1174,15 @@ function transformKeypointsDirectly(rectType, originalRect, newRect) {
                 // データ座標→Canvas座標（入力の座標系に応じて）
                 let canvasX, canvasY;
                 if (isNormalized) {
-                    canvasX = (x * dataResolutionWidth) * coordScaleX;
-                    canvasY = (y * dataResolutionHeight) * coordScaleY;
+                    canvasX = fit.offsetX + (x * dataResolutionWidth) * fit.scale;
+                    canvasY = fit.offsetY + (y * dataResolutionHeight) * fit.scale;
                 } else if (isCanvasUnit) {
                     // 既にCanvas座標（過去のバグで混入している場合）
                     canvasX = x;
                     canvasY = y;
                 } else {
-                    canvasX = x * coordScaleX;
-                    canvasY = y * coordScaleY;
+                    canvasX = fit.offsetX + x * fit.scale;
+                    canvasY = fit.offsetY + y * fit.scale;
                 }
                 
                 // 元矩形内での相対位置を計算（参照矩形に対して）
@@ -1200,15 +1199,15 @@ function transformKeypointsDirectly(rectType, originalRect, newRect) {
                 // Canvas座標→データ座標に戻す（常にデータ座標で保存）
                 let finalX, finalY;
                 if (isNormalized) {
-                    const dataX = newCanvasX / coordScaleX;
-                    const dataY = newCanvasY / coordScaleY;
+                    const dataX = (newCanvasX - fit.offsetX) / fit.scale;
+                    const dataY = (newCanvasY - fit.offsetY) / fit.scale;
                     finalX = dataX / dataResolutionWidth;
                     finalY = dataY / dataResolutionHeight;
                     targetKeypoints[i] = finalX;
                     targetKeypoints[i + 1] = finalY;
                 } else {
-                    finalX = newCanvasX / coordScaleX;
-                    finalY = newCanvasY / coordScaleY;
+                    finalX = (newCanvasX - fit.offsetX) / fit.scale;
+                    finalY = (newCanvasY - fit.offsetY) / fit.scale;
                     targetKeypoints[i] = finalX;
                     targetKeypoints[i + 1] = finalY;
                 }
@@ -1326,8 +1325,7 @@ function moveKeypointsFromOriginal(rectType, totalDeltaX, totalDeltaY) {
         dataResolutionHeight = currentPoseData.resolution[1];
     }
     
-    const coordScaleX = canvasWidth / dataResolutionWidth;
-    const coordScaleY = canvasHeight / dataResolutionHeight;
+    const fit = getFitParams([dataResolutionWidth, dataResolutionHeight]);
     
     // 正規化座標かピクセル座標かを判定
     let isNormalized = false;
@@ -1355,11 +1353,11 @@ function moveKeypointsFromOriginal(rectType, totalDeltaX, totalDeltaY) {
                 // データ座標→Canvas座標
                 let canvasX, canvasY;
                 if (isNormalized) {
-                    canvasX = (origX * dataResolutionWidth) * coordScaleX;
-                    canvasY = (origY * dataResolutionHeight) * coordScaleY;
+                    canvasX = fit.offsetX + (origX * dataResolutionWidth) * fit.scale;
+                    canvasY = fit.offsetY + (origY * dataResolutionHeight) * fit.scale;
                 } else {
-                    canvasX = origX * coordScaleX;
-                    canvasY = origY * coordScaleY;
+                    canvasX = fit.offsetX + origX * fit.scale;
+                    canvasY = fit.offsetY + origY * fit.scale;
                 }
                 
                 // 移動量を適用
@@ -1368,13 +1366,13 @@ function moveKeypointsFromOriginal(rectType, totalDeltaX, totalDeltaY) {
                 
                 // Canvas座標→データ座標に戻す
                 if (isNormalized) {
-                    const dataX = newCanvasX / coordScaleX;
-                    const dataY = newCanvasY / coordScaleY;
+                    const dataX = (newCanvasX - fit.offsetX) / fit.scale;
+                    const dataY = (newCanvasY - fit.offsetY) / fit.scale;
                     targetKeypoints[i] = dataX / dataResolutionWidth;
                     targetKeypoints[i + 1] = dataY / dataResolutionHeight;
                 } else {
-                    targetKeypoints[i] = newCanvasX / coordScaleX;
-                    targetKeypoints[i + 1] = newCanvasY / coordScaleY;
+                    targetKeypoints[i] = (newCanvasX - fit.offsetX) / fit.scale;
+                    targetKeypoints[i + 1] = (newCanvasY - fit.offsetY) / fit.scale;
                 }
             }
         }
@@ -1429,12 +1427,12 @@ function moveKeypointsWithRect(rectType, deltaX, deltaY) {
     }
     const canvasWidth = window.poseEditorGlobals.canvas ? window.poseEditorGlobals.canvas.width : 512;
     const canvasHeight = window.poseEditorGlobals.canvas ? window.poseEditorGlobals.canvas.height : 512;
-    const coordScaleX = canvasWidth / dataResolutionWidth;
-    const coordScaleY = canvasHeight / dataResolutionHeight;
+    // レターボックス対応フィット
+    const fit = getFitParams([dataResolutionWidth, dataResolutionHeight]);
     
     // Canvasの移動量→データ座標の移動量へ変換
-    const dataDeltaX = deltaX / coordScaleX;
-    const dataDeltaY = deltaY / coordScaleY;
+    const dataDeltaX = deltaX / fit.scale;
+    const dataDeltaY = deltaY / fit.scale;
 
     // すべてのキーポイントを移動（データ座標系）
     for (let i = 0; i < keypoints.length; i += 3) {
@@ -1609,16 +1607,10 @@ function updateKeypointPosition(keypointIndex, canvasX, canvasY) {
     
     // 📐 解像度情報の取得
     const originalRes = currentPoseData.resolution || [512, 512];
-    const scaleX = canvas.width / originalRes[0];
-    const scaleY = canvas.height / originalRes[1];
-    
-    // 🔧 refs互換：Canvas座標をデータ座標に変換してからクランプ
-    const dataX = canvasX / scaleX;
-    const dataY = canvasY / scaleY;
-    
-    // 🔧 refs互換：データ座標系でクランプ（0〜解像度内）
-    const clampedDataX = Math.max(0, Math.min(originalRes[0], dataX));
-    const clampedDataY = Math.max(0, Math.min(originalRes[1], dataY));
+    // Canvas→データ変換（レターボックス対応）
+    const d = canvasToDataXY(canvasX, canvasY, originalRes);
+    const clampedDataX = d.x;
+    const clampedDataY = d.y;
     
     // 1. candidateリストを更新
     const candidates = currentPoseData.bodies.candidate;
@@ -1908,8 +1900,7 @@ function drawPose(poseData, enableHands = true, enableFace = true, highlightInde
     
     // 📐 解像度情報の取得（手と顔描画のため）
     const originalRes = currentPoseData.resolution || [512, 512];
-    const scaleX = canvas.width / originalRes[0];
-    const scaleY = canvas.height / originalRes[1];
+    const fit = getFitParams(originalRes);
     
     
     // ボディの描画（ハイライト対応）
@@ -1944,7 +1935,7 @@ function drawPose(poseData, enableHands = true, enableFace = true, highlightInde
             
             if (handsDataForDrawing && handsDataForDrawing.length >= 2) {
                 if (window.poseEditorDebug.hands) console.log('✅ Calling drawHands function');
-                drawHands(handsDataForDrawing, originalRes, scaleX, scaleY);
+                drawHands(handsDataForDrawing, originalRes);
             } else {
                 if (window.poseEditorDebug.hands) console.log('❌ Invalid hands data for drawing');
             }
@@ -1962,10 +1953,10 @@ function drawPose(poseData, enableHands = true, enableFace = true, highlightInde
                         person.hand_left_keypoints_2d || [],
                         person.hand_right_keypoints_2d || []
                     ];
-                    drawHandRectangles(editedHandsData, originalRes, scaleX, scaleY);
+                    drawHandRectangles(editedHandsData, originalRes);
                 } else {
                     // 💖 people形式のみサポート、空データで矩形なし
-                    drawHandRectangles([[], []], originalRes, scaleX, scaleY);
+                    drawHandRectangles([[], []], originalRes);
                 }
             } else {
                 // 編集モード中：既存の矩形を描画（再計算しない）
@@ -1992,7 +1983,7 @@ function drawPose(poseData, enableHands = true, enableFace = true, highlightInde
             }
             
             if (facesDataForDrawing && facesDataForDrawing.length > 0) {
-                drawFaces(facesDataForDrawing, originalRes, scaleX, scaleY);
+                drawFaces(facesDataForDrawing, originalRes);
             }
         } catch (error) {
             console.error("❌ Error drawing face:", error);
@@ -2004,9 +1995,9 @@ function drawPose(poseData, enableHands = true, enableFace = true, highlightInde
                 // 🚀 通常時：編集済みキーポイントから矩形を計算
                 if (currentPoseData.people && currentPoseData.people[0] && currentPoseData.people[0].face_keypoints_2d) {
                     const editedFacesData = [currentPoseData.people[0].face_keypoints_2d];
-                    drawFaceRectangles(editedFacesData, originalRes, scaleX, scaleY);
+                    drawFaceRectangles(editedFacesData, originalRes);
                 } else {
-                    drawFaceRectangles(currentPoseData.faces, originalRes, scaleX, scaleY);
+                    drawFaceRectangles(currentPoseData.faces, originalRes);
                 }
             } else {
                 // 編集モード中：既存の矩形を描画（再計算しない）
@@ -2030,34 +2021,28 @@ function drawBackground() {
     ctx.fillStyle = '#ffffff';
     ctx.fillRect(0, 0, canvas.width, canvas.height);
     
-    // 背景画像がある場合は暗くして描画
+    // 背景画像がある場合はアスペクト比維持でフィット（上下黒帯 or 左右黒帯）
     if (window.poseEditorGlobals.backgroundImage) {
         const img = window.poseEditorGlobals.backgroundImage;
-        
-        // アスペクト比を保持してCanvas内に収める
         const imgAspect = img.width / img.height;
         const canvasAspect = canvas.width / canvas.height;
-        
         let drawWidth, drawHeight, offsetX, offsetY;
-        
         if (imgAspect > canvasAspect) {
-            // 画像の方が横長 → 幅をCanvasに合わせる
+            // 画像の方が横長 → 幅をCanvasに合わせて上下黒帯
             drawWidth = canvas.width;
-            drawHeight = canvas.width / imgAspect;
+            drawHeight = Math.round(canvas.width / imgAspect);
             offsetX = 0;
-            offsetY = (canvas.height - drawHeight) / 2;
+            offsetY = Math.round((canvas.height - drawHeight) / 2);
         } else {
-            // 画像の方が縦長 → 高さをCanvasに合わせる
+            // 画像の方が縦長 → 高さをCanvasに合わせて左右黒帯
             drawHeight = canvas.height;
-            drawWidth = canvas.height * imgAspect;
-            offsetX = (canvas.width - drawWidth) / 2;
+            drawWidth = Math.round(canvas.height * imgAspect);
+            offsetX = Math.round((canvas.width - drawWidth) / 2);
             offsetY = 0;
         }
-        
-        // 画像を暗くして描画（30%透明度）
         ctx.globalAlpha = 0.3;
         ctx.drawImage(img, offsetX, offsetY, drawWidth, drawHeight);
-        ctx.globalAlpha = 1.0; // 透明度を元に戻す
+        ctx.globalAlpha = 1.0;
     }
 }
 
@@ -2097,8 +2082,7 @@ function drawBody(poseData, highlightIndex = -1) {
     
     // 📐 解像度情報の取得
     const originalRes = poseData.resolution || [512, 512];
-    const scaleX = canvas.width / originalRes[0];
-    const scaleY = canvas.height / originalRes[1];
+    const fit = getFitParams(originalRes);
     
     // 接続線の描画（refs互換・配列ベース + 座標変換）
     ctx.lineWidth = 3;
@@ -2118,11 +2102,11 @@ function drawBody(poseData, highlightIndex = -1) {
                 startPoint[0] < originalRes[0] && startPoint[1] < originalRes[1] &&
                 endPoint[0] < originalRes[0] && endPoint[1] < originalRes[1]) {
                 
-                // 🔄 座標変換を適用
-                const startX = startPoint[0] * scaleX;
-                const startY = startPoint[1] * scaleY;
-                const endX = endPoint[0] * scaleX;
-                const endY = endPoint[1] * scaleY;
+                // 🔄 座標変換を適用（レターボックス対応）
+                const startX = fit.offsetX + startPoint[0] * fit.scale;
+                const startY = fit.offsetY + startPoint[1] * fit.scale;
+                const endX = fit.offsetX + endPoint[0] * fit.scale;
+                const endY = fit.offsetY + endPoint[1] * fit.scale;
                 
                 // 🔧 refs互換: SKELETON_COLORSの配列ベース色分け
                 ctx.strokeStyle = SKELETON_COLORS[i % SKELETON_COLORS.length];
@@ -2148,9 +2132,9 @@ function drawBody(poseData, highlightIndex = -1) {
         if (point && point[0] > 1 && point[1] > 1 &&
             point[0] < originalRes[0] && point[1] < originalRes[1]) {
             
-            // 🔄 座標変換を適用
-            const scaledX = point[0] * scaleX;
-            const scaledY = point[1] * scaleY;
+            // 🔄 座標変換を適用（レターボックス対応）
+            const scaledX = fit.offsetX + point[0] * fit.scale;
+            const scaledY = fit.offsetY + point[1] * fit.scale;
             
             // 🔧 ハイライト対応: ドラッグ中のキーポイントを強調表示
             if (i === highlightIndex) {
@@ -2175,8 +2159,8 @@ function drawBody(poseData, highlightIndex = -1) {
     
     // 🎨 補間機能: 有効キーポイントが少ない場合の視覚的改善
     if (drawnKeypoints < 10) {
-        // console.log(`[DEBUG] 💡 Low keypoint count (${drawnKeypoints}), applying visual enhancements`);
-        drawEstimatedConnections(candidates, originalRes, scaleX, scaleY);
+                // console.log(`[DEBUG] 💡 Low keypoint count (${drawnKeypoints}), applying visual enhancements`);
+                drawEstimatedConnections(candidates, originalRes);
     }
 }
 
@@ -2189,7 +2173,7 @@ function drawKeypoint(x, y, radius = KEYPOINT_RADIUS) {
 }
 
 // 手の描画（21キーポイント × 2）- refs互換
-function drawHands(handsData, originalRes, scaleX, scaleY) {
+function drawHands(handsData, originalRes, scaleX_unused, scaleY_unused) {
     if (!handsData || handsData.length === 0) return;
     
     // console.log(`[DEBUG] 👋 Drawing hands with ${handsData.length} hand(s) - refs互換`);
@@ -2219,9 +2203,10 @@ function drawHands(handsData, originalRes, scaleX, scaleY) {
                 const conf = hand[i + 2];
                 
                 if (conf > 0.1) {  // refs互換の閾値
-                    // 座標変換を適用
-                    const scaledX = x * scaleX;
-                    const scaledY = y * scaleY;
+                    // 座標変換を適用（レターボックス対応）
+                    const pt = dataToCanvasXY(x, y, originalRes);
+                    const scaledX = pt.x;
+                    const scaledY = pt.y;
                     handKeypoints.push([scaledX, scaledY, conf]);
                 } else {
                     handKeypoints.push([0, 0, 0]);  // 無効キーポイント
@@ -2282,7 +2267,7 @@ function drawHands(handsData, originalRes, scaleX, scaleY) {
 }
 
 // 顔の描画（68キーポイント）- refs互換
-function drawFaces(facesData, originalRes, scaleX, scaleY) {
+function drawFaces(facesData, originalRes, scaleX_unused, scaleY_unused) {
     if (!facesData || facesData.length === 0) return;
     
     // console.log(`[DEBUG] 👤 Drawing faces with ${facesData.length} face(s) - refs互換`);
@@ -2297,9 +2282,10 @@ function drawFaces(facesData, originalRes, scaleX, scaleY) {
             const conf = face[i + 2];
             
             if (conf > 0.1) {  // refs互換の閾値
-                // 座標変換を適用
-                const scaledX = x * scaleX;
-                const scaledY = y * scaleY;
+                // 座標変換を適用（レターボックス対応）
+                const pt = dataToCanvasXY(x, y, originalRes);
+                const scaledX = pt.x;
+                const scaledY = pt.y;
                 faceKeypoints.push([scaledX, scaledY, conf]);
             } else {
                 faceKeypoints.push([0, 0, 0]);  // 無効キーポイント
@@ -2366,6 +2352,40 @@ let coordinateTransformer = {
     }
 };
 
+// レターボックス対応のフィット変換（アスペクト比維持・黒帯）
+function getFitParams(originalRes) {
+    const dataW = (originalRes && originalRes[0]) || 512;
+    const dataH = (originalRes && originalRes[1]) || 512;
+    const cw = canvas.width;
+    const ch = canvas.height;
+    const s = Math.min(cw / dataW, ch / dataH);
+    const drawW = dataW * s;
+    const drawH = dataH * s;
+    const offsetX = (cw - drawW) / 2;
+    const offsetY = (ch - drawH) / 2;
+    return { scale: s, offsetX, offsetY };
+}
+
+function dataToCanvasXY(x, y, originalRes) {
+    const { scale, offsetX, offsetY } = getFitParams(originalRes);
+    return {
+        x: offsetX + x * scale,
+        y: offsetY + y * scale
+    };
+}
+
+function canvasToDataXY(cx, cy, originalRes) {
+    const dataW = (originalRes && originalRes[0]) || 512;
+    const dataH = (originalRes && originalRes[1]) || 512;
+    const { scale, offsetX, offsetY } = getFitParams(originalRes);
+    const x = (cx - offsetX) / scale;
+    const y = (cy - offsetY) / scale;
+    return {
+        x: Math.max(0, Math.min(dataW, x)),
+        y: Math.max(0, Math.min(dataH, y))
+    };
+}
+
 // データ解像度とCanvas表示サイズの変換（後方互換性）
 function transformCoordinate(x, y, dataWidth, dataHeight) {
     const scaleX = canvas.width / dataWidth;
@@ -2379,25 +2399,229 @@ function transformCoordinate(x, y, dataWidth, dataHeight) {
 
 // 描画時に座標変換を適用
 function drawKeypointScaled(x, y, dataRes, radius = KEYPOINT_RADIUS) {
-    const scaled = transformCoordinate(x, y, dataRes[0], dataRes[1]);
+    const scaled = dataToCanvasXY(x, y, dataRes);
     drawKeypoint(scaled.x, scaled.y, radius);
 }
 
 // Canvas解像度更新
+// 既存キーポイントを新しいサイズへ変換（正規化スケーリング）
+function updateKeypointsForNewSize(p, oldW, oldH, newW, newH) {
+    if (!p) return;
+    const oW = Math.max(1, oldW || 512);
+    const oH = Math.max(1, oldH || 512);
+    const nW = Math.max(1, newW || oW);
+    const nH = Math.max(1, newH || oH);
+
+    function scaleXY(x, y) {
+        // 正規化検出（0〜1範囲なら正規化座標とみなす）
+        const isNorm = (x >= 0 && x <= 1 && y >= 0 && y <= 1);
+        const nx = isNorm ? x * nW : (x / oW) * nW;
+        const ny = isNorm ? y * nH : (y / oH) * nH;
+        return [nx, ny];
+    }
+
+    // bodies.candidate: [[x,y,conf,...], ...]
+    try {
+        if (p.bodies && Array.isArray(p.bodies.candidate)) {
+            for (let i = 0; i < p.bodies.candidate.length; i++) {
+                const pt = p.bodies.candidate[i];
+                if (pt && pt.length >= 2) {
+                    const [nx, ny] = scaleXY(pt[0], pt[1]);
+                    p.bodies.candidate[i][0] = nx;
+                    p.bodies.candidate[i][1] = ny;
+                }
+            }
+        }
+    } catch (e) { /* no-op */ }
+
+    // people[0].pose_keypoints_2d: [x,y,conf, ...]
+    try {
+        if (p.people && p.people[0] && Array.isArray(p.people[0].pose_keypoints_2d)) {
+            const arr = p.people[0].pose_keypoints_2d;
+            for (let i = 0; i < arr.length; i += 3) {
+                if (i + 1 < arr.length) {
+                    const [nx, ny] = scaleXY(arr[i], arr[i + 1]);
+                    arr[i] = nx; arr[i + 1] = ny;
+                }
+            }
+        }
+    } catch (e) { /* no-op */ }
+
+    // hands (people形式優先)
+    try {
+        if (p.people && p.people[0]) {
+            const person = p.people[0];
+            const handFields = ['hand_left_keypoints_2d', 'hand_right_keypoints_2d'];
+            for (const field of handFields) {
+                if (Array.isArray(person[field])) {
+                    for (let i = 0; i < person[field].length; i += 3) {
+                        if (i + 1 < person[field].length) {
+                            const [nx, ny] = scaleXY(person[field][i], person[field][i + 1]);
+                            person[field][i] = nx; person[field][i + 1] = ny;
+                        }
+                    }
+                }
+            }
+        }
+    } catch (e) { /* no-op */ }
+
+    // faces (people形式優先)
+    try {
+        if (p.people && p.people[0] && Array.isArray(p.people[0].face_keypoints_2d)) {
+            const arr = p.people[0].face_keypoints_2d;
+            for (let i = 0; i < arr.length; i += 3) {
+                if (i + 1 < arr.length) {
+                    const [nx, ny] = scaleXY(arr[i], arr[i + 1]);
+                    arr[i] = nx; arr[i + 1] = ny;
+                }
+            }
+        }
+    } catch (e) { /* no-op */ }
+
+    // 旧形式 hands/faces も同期
+    try {
+        if (Array.isArray(p.hands)) {
+            for (let h = 0; h < p.hands.length; h++) {
+                const hand = p.hands[h];
+                if (Array.isArray(hand)) {
+                    for (let i = 0; i < hand.length; i += 3) {
+                        if (i + 1 < hand.length) {
+                            const [nx, ny] = scaleXY(hand[i], hand[i + 1]);
+                            hand[i] = nx; hand[i + 1] = ny;
+                        }
+                    }
+                }
+            }
+        }
+    } catch (e) { /* no-op */ }
+    try {
+        if (Array.isArray(p.faces)) {
+            for (let f = 0; f < p.faces.length; f++) {
+                const face = p.faces[f];
+                if (Array.isArray(face)) {
+                    for (let i = 0; i < face.length; i += 3) {
+                        if (i + 1 < face.length) {
+                            const [nx, ny] = scaleXY(face[i], face[i + 1]);
+                            face[i] = nx; face[i + 1] = ny;
+                        }
+                    }
+                }
+            }
+        }
+    } catch (e) { /* no-op */ }
+
+    // 解像度メタ更新
+    p.resolution = [nW, nH];
+    if (!p.metadata) p.metadata = {};
+    p.metadata.resolution = [nW, nH];
+}
+
+// 出力フォームとposeData.resolutionの不一致を検出してデータ側をスケール
+function alignPoseDataToOutputForm() {
+    try {
+        const p = window.poseEditorGlobals.poseData || poseData;
+        if (!p) return false;
+        // 取得: 現在のデータ解像度
+        const curRes = (p.resolution || (p.metadata && p.metadata.resolution)) || [512,512];
+        let curW = curRes[0] || 512, curH = curRes[1] || 512;
+        // 取得: フォームの出力サイズ
+        const nums = Array.from(document.querySelectorAll('input[type="number"]'));
+        let outW = null, outH = null;
+        for (const el of nums) {
+            const label = el.labels && el.labels[0] ? (el.labels[0].textContent || '').trim() : '';
+            if (label.includes('幅')) outW = parseInt(el.value || '0');
+            if (label.includes('高さ')) outH = parseInt(el.value || '0');
+        }
+        if (!outW || !outH) return false;
+        // すでに一致していれば何もしない
+        if (curW === outW && curH === outH) return false;
+        // データを新サイズへスケール
+        updateKeypointsForNewSize(p, curW, curH, outW, outH);
+        // 解像度メタも更新
+        p.resolution = [outW, outH];
+        if (!p.metadata) p.metadata = {};
+        p.metadata.resolution = [outW, outH];
+        // 参照を戻す
+        poseData = p;
+        window.poseEditorGlobals.poseData = p;
+        return true;
+    } catch (e) { return false; }
+}
+
+// Canvas解像度更新（座標���新サイズへスケール）
 function updateCanvasResolution(width, height) {
     if (!canvas) return false;
-    
-    canvas.width = width;
-    canvas.height = height;
-    
-    coordinateTransformer.updateResolution(null, [width, height]);
-    
-    // 現在のポーズデータを再描画
+
+    const newW = Math.max(1, Math.floor(width));
+    const newH = Math.max(1, Math.floor(height));
+
+    // 旧データ解像度を取得
+    const current = window.poseEditorGlobals.poseData || poseData;
+    const oldRes = (current && (current.resolution || (current.metadata && current.metadata.resolution))) || [512, 512];
+    const oldW = oldRes[0] || 512;
+    const oldH = oldRes[1] || 512;
+
+    // 表示Canvasは「出力比率」に揃える（解像度ではなく比率がポイント）
+    const base = 640; // 表示上の基準長辺
+    let dispW, dispH;
+    if (newW >= newH) {
+        dispW = base;
+        dispH = Math.max(1, Math.round(base * (newH / newW)));
+    } else {
+        dispH = base;
+        dispW = Math.max(1, Math.round(base * (newW / newH)));
+    }
+
+    // Canvasサイズ更新（表示）
+    canvas.width = dispW;
+    canvas.height = dispH;
+
+    // ディスプレイ座標系更新
+    coordinateTransformer.updateResolution(null, [dispW, dispH]);
+
+    // 既存データを新サイズにスケール
+    if (current) {
+        updateKeypointsForNewSize(current, oldW, oldH, newW, newH);
+        // 参照も同期
+        poseData = current;
+        window.poseEditorGlobals.poseData = current;
+    }
+
+    // フォームに合わせて（万一）比率を再調整
+    ensureCanvasAspectFromOutputForm(base);
+
+    // 再描画
     if (poseData) {
-        drawPose(poseData);
+        drawPose(poseData, window.poseEditorGlobals.enableHands, window.poseEditorGlobals.enableFace);
+    } else {
+        clearCanvas();
     }
-    
-    notifyCanvasOperation(`Canvas解像度を${width}x${height}に変更しました`);
+
+    notifyCanvasOperation(`Canvas解像度(表示)を${dispW}x${dispH}に、データを${newW}x${newH}に変更しました`);
+    // 🔄 サーバーへ最新データを送信してエクスポートと同期
+    try {
+        if (typeof sendPoseDataToGradio === 'function') {
+            // 次の描画フレーム後に送信してループを回避
+            setTimeout(() => { try { sendPoseDataToGradio(); } catch (e) {} }, 0);
+        }
+    } catch (e) {}
+    return true;
+}
+
+// Canvas解像度更新（データはスケールせず、表示のみ変更）
+function setCanvasSizeNoScale(width, height) {
+    if (!canvas) return false;
+    const newW = Math.max(1, Math.floor(width));
+    const newH = Math.max(1, Math.floor(height));
+    canvas.width = newW;
+    canvas.height = newH;
+    coordinateTransformer.updateResolution(null, [newW, newH]);
+    if (poseData) {
+        drawPose(poseData, window.poseEditorGlobals.enableHands, window.poseEditorGlobals.enableFace);
+    } else {
+        clearCanvas();
+    }
+    notifyCanvasOperation(`Canvas表示サイズを${newW}x${newH}に変更しました（データはスケールしません）`);
     return true;
 }
 
@@ -2480,6 +2704,29 @@ window.gradioCanvasUpdate = function(pose_json_str) {
             window.poseEditorGlobals.poseData = poseData;
         }
         
+        // 💖 表示Canvasを出力比率に自動追従
+        try {
+            const c = window.poseEditorGlobals.canvas || document.getElementById('pose_canvas');
+            if (c) {
+                const res = (poseData && (poseData.resolution || (poseData.metadata && poseData.metadata.resolution))) || [512,512];
+                const outW = Math.max(1, Math.floor(res[0] || 512));
+                const outH = Math.max(1, Math.floor(res[1] || 512));
+                const base = 640; // 長辺基準
+                let dispW, dispH;
+                if (outW >= outH) { dispW = base; dispH = Math.max(1, Math.round(base * (outH/outW))); }
+                else { dispH = base; dispW = Math.max(1, Math.round(base * (outW/outH))); }
+                if (c.width !== dispW || c.height !== dispH) {
+                    c.width = dispW; c.height = dispH;
+                    window.poseEditorGlobals.canvas = c;
+                    window.poseEditorGlobals.ctx = c.getContext('2d');
+                }
+                // 変換器の表示解像度も更新
+                if (typeof coordinateTransformer?.updateResolution === 'function') {
+                    coordinateTransformer.updateResolution(null, [c.width, c.height]);
+                }
+            }
+        } catch(e) {}
+
         // 💖 originalKeypointsも設定（但し、baseOriginalKeypointsは保護）
         if (poseData && poseData.people && poseData.people[0]) {
             // baseOriginalKeypointsは上書きしない（編集セッション保持のため）
@@ -2529,6 +2776,10 @@ window.gradioCanvasUpdate = function(pose_json_str) {
         
         // グローバル設定で描画（手・顔表示設定を反映）
         if (poseData && Object.keys(poseData).length > 0) {
+            // 表示Canvasはフォーム比率に追従
+            ensureCanvasAspectFromOutputForm(640);
+            // 受信直後にデータ解像度をフォーム値に合わせてスケール（初回ズレ防止）
+            alignPoseDataToOutputForm();
             drawPose(
                 poseData, 
                 currentHandsEnabled, 
@@ -2705,7 +2956,7 @@ function safeCanvasOperation(operation) {
 
 
 // 🔧 簡易モード：手の矩形描画（refs互換）
-function drawHandRectangles(handsData, originalRes, scaleX, scaleY) {
+function drawHandRectangles(handsData, originalRes, scaleX_unused, scaleY_unused) {
     if (!handsData || handsData.length === 0) return;
     
     
@@ -2717,7 +2968,7 @@ function drawHandRectangles(handsData, originalRes, scaleX, scaleY) {
     
     handsData.forEach((hand, handIndex) => {
         if (hand && hand.length > 0) {
-            const rect = calculateHandRect(hand, originalRes, scaleX, scaleY);
+            const rect = calculateHandRect(hand, originalRes);
             if (rect) {
                 const handType = HAND_TYPES[handIndex] || `hand_${handIndex}`;
                 
@@ -2736,7 +2987,7 @@ function drawHandRectangles(handsData, originalRes, scaleX, scaleY) {
 }
 
 // 🔧 簡易モード：顔の矩形描画（refs互換）
-function drawFaceRectangles(facesData, originalRes, scaleX, scaleY) {
+function drawFaceRectangles(facesData, originalRes, scaleX_unused, scaleY_unused) {
     if (!facesData || facesData.length === 0) return;
     
     
@@ -2747,7 +2998,7 @@ function drawFaceRectangles(facesData, originalRes, scaleX, scaleY) {
     
     const face = facesData[0]; // 最初の顔のみ（編集済みデータ）
     if (face && face.length > 0) {
-        const rect = calculateFaceRect(face, originalRes, scaleX, scaleY);
+        const rect = calculateFaceRect(face, originalRes);
         if (rect) {
             // 🔧 グローバルに矩形情報保存（編集モード中は既存の矩形を保持）
             if (!window.poseEditorGlobals.currentRects.face || !window.poseEditorGlobals.rectEditModeActive) {
@@ -2774,11 +3025,10 @@ function calculateHandRect(handData, originalRes, scaleX, scaleY) {
         const confidence = handData[i + 2];
         
         if (confidence > 0.3) { // refs互換の閾値
-            // 🔧 手のキーポイント描画と完全に統一した座標変換
-            // drawHands関数では scaledX = x * scaleX しているため、
-            // 矩形計算でも同じ変換を適用して座標系を統一
-            const finalX = x * scaleX;
-            const finalY = y * scaleY;
+            // 🔧 レターボックス対応の座標変換
+            const pt = dataToCanvasXY(x, y, originalRes);
+            const finalX = pt.x;
+            const finalY = pt.y;
             
             minX = Math.min(minX, finalX);
             minY = Math.min(minY, finalY);
@@ -2861,8 +3111,9 @@ function calculateFaceRect(faceData, originalRes, scaleX, scaleY) {
         const confidence = faceData[i + 2];
         
         if (confidence > 0.3) { // refs互換の閾値
-            const scaledX = x * scaleX;
-            const scaledY = y * scaleY;
+            const pt = dataToCanvasXY(x, y, originalRes);
+            const scaledX = pt.x;
+            const scaledY = pt.y;
             
             minX = Math.min(minX, scaledX);
             minY = Math.min(minY, scaledY);
@@ -2960,8 +3211,7 @@ function redrawPoseWithoutRecalculation() {
     
     // 📐 解像度情報の取得
     const originalRes = currentPoseData.resolution || [512, 512];
-    const scaleX = canvas.width / originalRes[0];
-    const scaleY = canvas.height / originalRes[1];
+    const fit = getFitParams(originalRes);
     
     // ボディの描画（ハイライトなし）
     drawBody(currentPoseData, -1);
@@ -2974,12 +3224,12 @@ function redrawPoseWithoutRecalculation() {
             person.hand_left_keypoints_2d || [],
             person.hand_right_keypoints_2d || []
         ];
-        drawHands(handsData, originalRes, scaleX, scaleY);
+        drawHands(handsData, originalRes);
     }
     
     // 顔の描画（設定制御・座標変換パラメータ付き）
     if (window.poseEditorGlobals.enableFace && currentPoseData.faces) {
-        drawFaces(currentPoseData.faces, originalRes, scaleX, scaleY);
+        drawFaces(currentPoseData.faces, originalRes);
     }
     
     // 🔧 既存の矩形のみ描画（再計算なし）
@@ -3350,18 +3600,17 @@ function updateKeypointsArrayByRect(keypointsArray, originalKeypointsArray, orig
                 const origY = originalKeypointsArray[i + 1];
                 
                 if (origX > 0 && origY > 0) {
-                    // 🚀 座標変換：表示座標→データ座標（シンプル版）
-                    const scaleX = 640 / 512; // 1.25
-                    const scaleY = 640 / 512; // 1.25
-                    
-                    const origRectDataX = originalRect.x / scaleX;
-                    const origRectDataY = originalRect.y / scaleY;
-                    const newRectDataX = newRect.x / scaleX;
-                    const newRectDataY = newRect.y / scaleY;
-                    const origRectWidthData = originalRect.width / scaleX;
-                    const origRectHeightData = originalRect.height / scaleY;
-                    const newRectWidthData = newRect.width / scaleX;
-                    const newRectHeightData = newRect.height / scaleY;
+                    // 🚀 座標変換：Canvas↔データ座標（レターボックス対応）
+                    const res = (window.poseEditorGlobals.poseData && window.poseEditorGlobals.poseData.resolution) || [512,512];
+                    const fit = getFitParams(res);
+                    const origRectDataX = (originalRect.x - fit.offsetX) / fit.scale;
+                    const origRectDataY = (originalRect.y - fit.offsetY) / fit.scale;
+                    const newRectDataX = (newRect.x - fit.offsetX) / fit.scale;
+                    const newRectDataY = (newRect.y - fit.offsetY) / fit.scale;
+                    const origRectWidthData = originalRect.width / fit.scale;
+                    const origRectHeightData = originalRect.height / fit.scale;
+                    const newRectWidthData = newRect.width / fit.scale;
+                    const newRectHeightData = newRect.height / fit.scale;
                     
                     // 元矩形内の相対位置を計算
                     const relativeX = (origX - origRectDataX) / origRectWidthData;
@@ -3410,15 +3659,17 @@ function moveKeypointsArray(keypointsArray, deltaX, deltaY, label) {
                 const currentX = keypointsArray[i];
                 const currentY = keypointsArray[i + 1];
                 
-                // 🚀 座標変換：表示座標の移動量→データ座標の移動量（シンプル版）
-                const scaleX = 640 / 512; // 1.25
-                const scaleY = 640 / 512; // 1.25
-                const dataDeltaX = deltaX / scaleX;
-                const dataDeltaY = deltaY / scaleY;
+                // 🚀 座標変換：表示座標の移動量→データ座標の移動量（レタボ対応）
+                const res = (window.poseEditorGlobals.poseData && window.poseEditorGlobals.poseData.resolution) || [512,512];
+                const fit = getFitParams(res);
+                const dataDeltaX = deltaX / fit.scale;
+                const dataDeltaY = deltaY / fit.scale;
                 
                 // 移動（512x512にクランプ）
-                const newX = Math.max(0, Math.min(512, currentX + dataDeltaX));
-                const newY = Math.max(0, Math.min(512, currentY + dataDeltaY));
+                const dataW = res[0] || 512;
+                const dataH = res[1] || 512;
+                const newX = Math.max(0, Math.min(dataW, currentX + dataDeltaX));
+                const newY = Math.max(0, Math.min(dataH, currentY + dataDeltaY));
                 
                 keypointsArray[i] = newX;
                 keypointsArray[i + 1] = newY;
@@ -3558,8 +3809,7 @@ function updateKeypointsByRect(rectType, newRect) {
         dataResolutionHeight = currentPoseData.resolution[1];
     }
     
-    const coordScaleX = canvas.width / dataResolutionWidth;
-    const coordScaleY = canvas.height / dataResolutionHeight;
+    const fit = getFitParams([dataResolutionWidth, dataResolutionHeight]);
     
     // 正規化座標かピクセル座標かを判定（refs互換）
     let isNormalized = false;
@@ -3588,11 +3838,11 @@ function updateKeypointsByRect(rectType, newRect) {
                 // データ座標→Canvas座標
                 let canvasX, canvasY;
                 if (isNormalized) {
-                    canvasX = (x * dataResolutionWidth) * coordScaleX;
-                    canvasY = (y * dataResolutionHeight) * coordScaleY;
+                    canvasX = fit.offsetX + (x * dataResolutionWidth) * fit.scale;
+                    canvasY = fit.offsetY + (y * dataResolutionHeight) * fit.scale;
                 } else {
-                    canvasX = x * coordScaleX;
-                    canvasY = y * coordScaleY;
+                    canvasX = fit.offsetX + x * fit.scale;
+                    canvasY = fit.offsetY + y * fit.scale;
                 }
                 
                 // 🔧 元矩形内での相対位置を計算（refs互換・安全範囲チェック）
@@ -3609,8 +3859,8 @@ function updateKeypointsByRect(rectType, newRect) {
                 
                 // 🔧 Canvas座標→データ座標に戻す（refs互換・範囲制限付き）
                 if (isNormalized) {
-                    const dataX = newCanvasX / coordScaleX;
-                    const dataY = newCanvasY / coordScaleY;
+                    const dataX = (newCanvasX - fit.offsetX) / fit.scale;
+                    const dataY = (newCanvasY - fit.offsetY) / fit.scale;
                     let newNormX = dataX / dataResolutionWidth;
                     let newNormY = dataY / dataResolutionHeight;
                     
@@ -3621,8 +3871,8 @@ function updateKeypointsByRect(rectType, newRect) {
                     targetKeypoints[i] = newNormX;
                     targetKeypoints[i + 1] = newNormY;
                 } else {
-                    let newDataX = newCanvasX / coordScaleX;
-                    let newDataY = newCanvasY / coordScaleY;
+                    let newDataX = (newCanvasX - fit.offsetX) / fit.scale;
+                    let newDataY = (newCanvasY - fit.offsetY) / fit.scale;
                     
                     // ピクセル座標の範囲制限
                     newDataX = Math.max(0, Math.min(dataResolutionWidth, newDataX));
@@ -3706,8 +3956,7 @@ function moveKeypointsByRect(rectType, deltaX, deltaY) {
         dataResolutionHeight = currentPoseData.resolution[1];
     }
     
-    const coordScaleX = canvas.width / dataResolutionWidth;
-    const coordScaleY = canvas.height / dataResolutionHeight;
+    const fit = getFitParams([dataResolutionWidth, dataResolutionHeight]);
     
     // 正規化座標かピクセル座標かを判定（refs互換）
     let isNormalized = false;
@@ -3723,8 +3972,8 @@ function moveKeypointsByRect(rectType, deltaX, deltaY) {
     }
     
     // Canvas座標での移動量をデータ座標での移動量に変換
-    const dataDeltaX = deltaX / coordScaleX;
-    const dataDeltaY = deltaY / coordScaleY;
+    const dataDeltaX = deltaX / fit.scale;
+    const dataDeltaY = deltaY / fit.scale;
     
     
     let movedCount = 0;
@@ -3751,8 +4000,9 @@ function moveKeypointsByRect(rectType, deltaX, deltaY) {
 }
 
 // 🎨 推定接続の描画（少ないキーポイント用の補間機能）
-function drawEstimatedConnections(candidates, originalRes, scaleX, scaleY) {
+function drawEstimatedConnections(candidates, originalRes) {
     const ctx = window.poseEditorGlobals.ctx;
+    const fit = getFitParams(originalRes);
     
     // 有効なキーポイントを取得
     const validPoints = [];
@@ -3762,8 +4012,8 @@ function drawEstimatedConnections(candidates, originalRes, scaleX, scaleY) {
             point[0] < originalRes[0] && point[1] < originalRes[1]) {
             validPoints.push({
                 index: i,
-                x: point[0] * scaleX,
-                y: point[1] * scaleY,
+                x: fit.offsetX + point[0] * fit.scale,
+                y: fit.offsetY + point[1] * fit.scale,
                 originalX: point[0],
                 originalY: point[1]
             });
@@ -3807,8 +4057,72 @@ function drawEstimatedConnections(candidates, originalRes, scaleX, scaleY) {
     }
     
     // スタイルをリセット
+// 出力フォーム(幅/高さ)から比率を取得しCanvas表示サイズを合わせる
+function ensureCanvasAspectFromOutputForm(baseLongSide = 640) {
+    try {
+        const c = window.poseEditorGlobals.canvas || document.getElementById('pose_canvas');
+        if (!c) return;
+        // 「幅」「高さ」ラベル付きのnumber inputを探索
+        const nums = Array.from(document.querySelectorAll('input[type="number"]'));
+        let w = null, h = null;
+        for (const el of nums) {
+            const labelText = el.labels && el.labels[0] ? (el.labels[0].textContent || '').trim() : '';
+            if (labelText.includes('幅')) w = parseInt(el.value || '0');
+            if (labelText.includes('高さ')) h = parseInt(el.value || '0');
+        }
+        if (!w || !h || w <= 0 || h <= 0) return;
+        // 比率に合わせて表示Canvasサイズを再計算
+        let dispW, dispH;
+        if (w >= h) { dispW = baseLongSide; dispH = Math.max(1, Math.round(baseLongSide * (h / w))); }
+        else { dispH = baseLongSide; dispW = Math.max(1, Math.round(baseLongSide * (w / h))); }
+        if (c.width !== dispW || c.height !== dispH) {
+            c.width = dispW; c.height = dispH;
+            window.poseEditorGlobals.canvas = c;
+            window.poseEditorGlobals.ctx = c.getContext('2d');
+            if (typeof coordinateTransformer?.updateResolution === 'function') {
+                coordinateTransformer.updateResolution(null, [dispW, dispH]);
+            }
+        }
+    } catch (e) {}
+}
     ctx.setLineDash([]);  // 実線に戻す
     ctx.globalAlpha = 1.0;  // 不透明に戻す
 }
 
 // 🎨 pose_editor.js initialization complete
+// --- Global helper to enforce canvas aspect from output form ---
+(function(){
+    if (!window.ensureCanvasAspectFromOutputForm) {
+        window.ensureCanvasAspectFromOutputForm = function(baseLongSide = 640) {
+            try {
+                const c = window.poseEditorGlobals?.canvas || document.getElementById('pose_canvas');
+                if (!c) return;
+                // 1) try form values
+                const nums = Array.from(document.querySelectorAll('input[type="number"]'));
+                let w = null, h = null;
+                for (const el of nums) {
+                    const label = el.labels && el.labels[0] ? (el.labels[0].textContent||'').trim() : '';
+                    if (label.includes('幅')) w = parseInt(el.value||'0');
+                    if (label.includes('高さ')) h = parseInt(el.value||'0');
+                }
+                // 2) fallback to pose resolution
+                if (!w || !h) {
+                    const res = (window.poseEditorGlobals?.poseData?.resolution) || [512,512];
+                    w = res[0]; h = res[1];
+                }
+                if (!w || !h || w<=0 || h<=0) return;
+                let dispW, dispH;
+                if (w >= h) { dispW = baseLongSide; dispH = Math.max(1, Math.round(baseLongSide * (h/w))); }
+                else { dispH = baseLongSide; dispW = Math.max(1, Math.round(baseLongSide * (w/h))); }
+                if (c.width !== dispW || c.height !== dispH) {
+                    c.width = dispW; c.height = dispH;
+                    window.poseEditorGlobals.canvas = c;
+                    window.poseEditorGlobals.ctx = c.getContext('2d');
+                    if (typeof coordinateTransformer?.updateResolution === 'function') {
+                        coordinateTransformer.updateResolution(null, [dispW, dispH]);
+                    }
+                }
+            } catch(e) {}
+        }
+    }
+})();

utils/export_utils.py

@@ -8,6 +8,54 @@ import base64
 from datetime import datetime
 from .notifications import notify_success, notify_error
 
+def _detect_source_resolution_from_data(pose_data):
+    """推定的にデータ座標系の解像度を検出（最大x/yから推定）"""
+    try:
+        max_x = 0.0
+        max_y = 0.0
+        def scan_points(arr):
+            nonlocal max_x, max_y
+            if not arr: return
+            for i in range(0, len(arr), 3):
+                if i + 2 < len(arr):
+                    x, y, conf = arr[i], arr[i+1], arr[i+2]
+                    if conf is None or conf <= 0: 
+                        continue
+                    # 正規化の可能性は別で判定するので、そのまま最大値を取る
+                    if isinstance(x, (int, float)) and isinstance(y, (int, float)):
+                        max_x = max(max_x, float(x))
+                        max_y = max(max_y, float(y))
+
+        if isinstance(pose_data, dict) and 'people' in pose_data and pose_data['people']:
+            person = pose_data['people'][0]
+            scan_points(person.get('pose_keypoints_2d', []))
+            scan_points(person.get('hand_left_keypoints_2d', []))
+            scan_points(person.get('hand_right_keypoints_2d', []))
+            scan_points(person.get('face_keypoints_2d', []))
+        else:
+            # bodies/hands/faces 互換
+            if 'bodies' in pose_data and pose_data['bodies'] and 'candidate' in pose_data['bodies']:
+                cands = pose_data['bodies']['candidate'] or []
+                for c in cands:
+                    if c and len(c) >= 2:
+                        max_x = max(max_x, float(c[0]))
+                        max_y = max(max_y, float(c[1]))
+            for hand in (pose_data.get('hands') or []):
+                scan_points(hand)
+            for face in (pose_data.get('faces') or []):
+                scan_points(face)
+
+        # 正規化（<=1）っぽい場合はNone返却
+        if max_x <= 1.01 and max_y <= 1.01:
+            return None
+        # ゼロは不正
+        if max_x <= 0 or max_y <= 0:
+            return None
+        # 端数をそのまま使うより、丸め込む（最小でも整数）
+        return (int(round(max_x)), int(round(max_y)))
+    except Exception:
+        return None
+
 def get_timestamp_filename(prefix, extension):
     """
     タイムスタンプ付きファイル名を生成
@@ -50,10 +98,30 @@ def export_pose_as_image(pose_data, canvas_size=(640, 640), background_color=(0,
         draw = ImageDraw.Draw(image)
         print(f"[DEBUG] 🎨 背景画像作成完了: {canvas_size}")
         
+        # 解像度（元データ座標系）
+        src_w, src_h = canvas_size
+        if isinstance(pose_data, dict):
+            if 'resolution' in pose_data and isinstance(pose_data['resolution'], (list, tuple)) and len(pose_data['resolution']) >= 2:
+                src_w, src_h = int(pose_data['resolution'][0] or canvas_size[0]), int(pose_data['resolution'][1] or canvas_size[1])
+            elif 'metadata' in pose_data and isinstance(pose_data['metadata'], dict) and 'resolution' in pose_data['metadata']:
+                res = pose_data['metadata'].get('resolution', canvas_size)
+                if isinstance(res, (list, tuple)) and len(res) >= 2:
+                    src_w, src_h = int(res[0] or canvas_size[0]), int(res[1] or canvas_size[1])
+
+        # 解像度が未設定のときのみ、データから推定した解像度を利用（誤検出による過度な拡大を防止）
+        if (not isinstance(pose_data, dict)) or (
+            ('resolution' not in pose_data or not pose_data.get('resolution')) and 
+            (pose_data.get('metadata') is None or not pose_data['metadata'].get('resolution'))
+        ):
+            detected = _detect_source_resolution_from_data(pose_data)
+            if detected is not None:
+                src_w, src_h = detected
+
         # ボディの描画（refs準拠）
+        print(f"[DEBUG] 🧭 Export scale info: src_res=({src_w},{src_h}) -> out=({canvas_size[0]},{canvas_size[1]})")
         if 'people' in pose_data and pose_data['people']:
             print(f"[DEBUG] 🎨 ボディ描画開始（refs準拠）")
-            draw_body_on_image(draw, pose_data, canvas_size)
+            draw_body_on_image(draw, pose_data, canvas_size, (src_w, src_h))
             print(f"[DEBUG] 🎨 ボディ描画完了")
         else:
             print(f"[DEBUG] ⚠️ ボディデータなし - people: {'people' in pose_data}, count: {len(pose_data.get('people', []))}")
@@ -73,7 +141,7 @@ def export_pose_as_image(pose_data, canvas_size=(640, 640), background_color=(0,
                 print(f"[DEBUG] 🎨 手描画開始（hands形式）")
             
             if hands_data:
-                draw_hands_on_image(draw, hands_data, canvas_size)
+                draw_hands_on_image(draw, hands_data, canvas_size, (src_w, src_h))
                 print(f"[DEBUG] 🎨 手描画完了")
             else:
                 print(f"[DEBUG] ⚠️ 手描画スキップ - 手データなし")
@@ -92,7 +160,7 @@ def export_pose_as_image(pose_data, canvas_size=(640, 640), background_color=(0,
                 print(f"[DEBUG] 🎨 顔描画開始（faces形式）")
             
             if face_data:
-                draw_faces_on_image(draw, face_data, canvas_size)
+                draw_faces_on_image(draw, face_data, canvas_size, (src_w, src_h))
                 print(f"[DEBUG] 🎨 顔描画完了")
             else:
                 print(f"[DEBUG] ⚠️ 顔描画スキップ - 顔データなし")
@@ -106,7 +174,7 @@ def export_pose_as_image(pose_data, canvas_size=(640, 640), background_color=(0,
         notify_error(f"ポーズ画像エクスポートに失敗しました: {str(e)}")
         return None
 
-def draw_body_on_image(draw, pose_data, canvas_size):
+def draw_body_on_image(draw, pose_data, canvas_size, source_resolution=None):
     """画像にボディを描画（refs準拠）"""
     try:
         print(f"[DEBUG] 🎨 draw_body_on_image開始（refs準拠）")
@@ -132,6 +200,9 @@ def draw_body_on_image(draw, pose_data, canvas_size):
         ]
         
         W, H = canvas_size
+        srcW, srcH = (source_resolution or canvas_size)
+        if srcW <= 0 or srcH <= 0:
+            srcW, srcH = W, H
         detection_threshold = 0.3
         
         for person in people:
@@ -147,12 +218,21 @@ def draw_body_on_image(draw, pose_data, canvas_size):
             
             print(f"[DEBUG] 🎨 keypoints count: {len(keypoints)}")
             
-            # 座標の正規化チェックと変換（refs準拠）
-            if len(keypoints) > 0 and all(0 <= kp[0] <= 1 and 0 <= kp[1] <= 1 for kp in keypoints if kp[2] > 0):
+            # 座標の正規化/解像度差吸収（0..1正規化 or ピクセル→出力解像度へスケール）
+            is_normalized = len(keypoints) > 0 and all(0 <= kp[0] <= 1 and 0 <= kp[1] <= 1 for kp in keypoints if kp[2] > 0)
+            if is_normalized:
                 for kp in keypoints:
                     if kp[2] > 0:
                         kp[0] *= W
                         kp[1] *= H
+            else:
+                # ピクセル座標 → 出力サイズへスケール（元解像度→出力解像度）
+                sx = W / float(srcW)
+                sy = H / float(srcH)
+                for kp in keypoints:
+                    if kp[2] > 0:
+                        kp[0] *= sx
+                        kp[1] *= sy
             
             # refs準拠：接続線の描画
             for i, connection in enumerate(connections):
@@ -192,35 +272,47 @@ def draw_body_on_image(draw, pose_data, canvas_size):
         import traceback
         traceback.print_exc()
 
-def draw_hands_on_image(draw, hands_data, canvas_size):
+def draw_hands_on_image(draw, hands_data, canvas_size, source_resolution=None):
     """💖 画像に手を描画（座標変換対応）"""
     W, H = canvas_size
+    srcW, srcH = (source_resolution or canvas_size)
+    if srcW <= 0 or srcH <= 0:
+        srcW, srcH = W, H
     for hand in hands_data:
         if hand and len(hand) > 0:
             for i in range(0, len(hand), 3):
                 if i + 2 < len(hand):
                     x, y, conf = hand[i], hand[i+1], hand[i+2]
                     if conf > 0.3:
-                        # 💖 座標の正規化チェック（0-1の場合はCanvas座標に変換）
+                        # 💖 座標の正規化/ピクセルスケール
                         if 0 <= x <= 1 and 0 <= y <= 1:
                             x = x * W
                             y = y * H
+                        else:
+                            x = x * (W / float(srcW))
+                            y = y * (H / float(srcH))
                         # refs準拠: OpenCV(255,0,0)BGR → PIL(0,0,255)RGB = 青
                         draw.ellipse([int(x)-3, int(y)-3, int(x)+3, int(y)+3], fill=(0, 0, 255))
 
-def draw_faces_on_image(draw, faces_data, canvas_size):
+def draw_faces_on_image(draw, faces_data, canvas_size, source_resolution=None):
     """💖 画像に顔を描画（座標変換対応）"""
     W, H = canvas_size
+    srcW, srcH = (source_resolution or canvas_size)
+    if srcW <= 0 or srcH <= 0:
+        srcW, srcH = W, H
     for face in faces_data:
         if face and len(face) > 0:
             for i in range(0, len(face), 3):
                 if i + 2 < len(face):
                     x, y, conf = face[i], face[i+1], face[i+2]
                     if conf > 0.3:
-                        # 💖 座標の正規化チェック（0-1の場合はCanvas座標に変換）
+                        # 💖 座標の正規化/ピクセルスケール
                         if 0 <= x <= 1 and 0 <= y <= 1:
                             x = x * W
                             y = y * H
+                        else:
+                            x = x * (W / float(srcW))
+                            y = y * (H / float(srcH))
                         # refs準拠: OpenCV(255,255,255)BGR → PIL(255,255,255)RGB = 白
                         draw.ellipse([int(x)-2, int(y)-2, int(x)+2, int(y)+2], fill=(255, 255, 255))
 
@@ -349,4 +441,4 @@ def create_download_link(content, filename, content_type="text/plain"):
         
     except Exception as e:
         print(f"Download link creation error: {e}")
-        return None
+        return None