Free 360 Degree Image Nadir Patch & Logo Adder Tool

360 Camera Nadir Patch Tool: Technical Specification

1. Objective

Create a high-performance, browser-based utility that allows users to overlay a logo or graphic onto the nadir (bottom center) of a 360-degree equirectangular image. The tool must prioritize privacy by processing all operations client-side using the HTML5 Canvas API.

2. Core Feature List

• Equirectangular Upload: Drag-and-drop or file-selector support for large JPG/PNG image files.
• Logo/Patch Import: Transparent PNG overlay support.
• Precision Controls:
  • Scaling slider (0.1x to 2x).
  • Opacity adjustment (0% to 100%).
  • Rotation control.
• Nadir Positioning: Auto-center alignment with manual X/Y offset adjustments.
• Live Preview: Real-time preview rendering of the nadir section.
• Direct Download: Export functionality to save the modified 360-degree image without loss of quality.
• No-Storage Architecture: Zero-latency implementation using only in-memory variables.

3. User Interface & Layout

• Header: Simple, clean application title. No branding, no navigation menu.
• Main Content Area: A dual-pane layout:
  • Left Sidebar (Controls): Contains file upload buttons, adjustment sliders (styled using modern CSS), and an 'Export' action button.
  • Right Viewport (Canvas): A large, responsive area displaying a zoomed-in preview of the nadir section, allowing users to see the logo placement clearly before committing.
• Design Aesthetic:
  • Light Mode Only: Crisp white backgrounds (#FFFFFF) with neutral gray borders (#E5E7EB).
  • Typography: Sans-serif (system stack) for readability.
  • Actions: High-contrast primary buttons (e.g., deep blue) with subtle hover transitions (ease-in-out).

4. Technical Implementation Directives

• Single File: All HTML, CSS (Tailwind CDN), and JS (Vanilla) must reside within one .html file.
• Iframe Compatibility:
  • No localStorage, sessionStorage, or cookies. Use a simple object variable to track current image state.
  • No browser alert() or prompt() calls. Use custom <div>-based modal dialogs for all user notifications.
• Performance:
  • Use OffscreenCanvas if available for heavy rendering.
  • Avoid loading entire 8K images into the DOM; use FileReader and Image objects to handle pixel-level manipulation.
  • Efficiently manage object cleanup (set img.src = null) to prevent memory leaks during high-resolution processing.

5. User Workflow

1. User lands on the page and is greeted by an 'Upload 360 Image' button.
2. Once loaded, the image is rendered to an internal canvas.
3. The user uploads their logo/patch.
4. The logo is automatically rendered at the bottom center of the canvas.
5. The user adjusts size/position using the sidebar sliders.
6. The 'Download' button triggers a Blob-to-URL conversion to prompt a file save.

6. Constraints Reminder

• No third-party tracking scripts.
• No footer or external links (except essential documentation).
• Responsive design: The sidebar must collapse or reposition to a top-bar format on mobile screens.