| <!DOCTYPE html> |
| <html lang="ko"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>이미지 겹치기 편집기 (여러 이미지 지원)</title> |
| <link rel="stylesheet" href="style.css"> |
| </head> |
| <body> |
| <div class="container"> |
| <h1>이미지 겹치기 편집기</h1> |
| <p>배경 이미지 위에 여러 개의 배경 제거된 이미지를 배치하고 각각 조절한 후, 조절된 이미지들만 PNG로 추출합니다.</p> |
| |
| <div class="upload-container"> |
| <div class="upload-box"> |
| <span class="upload-label">1. 원본 이미지 선택</span> |
| <input type="file" id="background-input" class="file-input" accept="image/*"> |
| <label for="background-input" class="upload-button">원본 이미지 업로드</label> |
| </div> |
| <div class="upload-box"> |
| <span class="upload-label">2. 배경 제거된 이미지 선택 (추출될 PNG, 여러 개 가능)</span> |
| <input type="file" id="overlay-input" class="file-input" accept="image/*"> |
| <label for="overlay-input" class="upload-button">겹칠 이미지 업로드</label> |
| </div> |
| </div> |
| |
| <div class="control-panel"> |
| <div class="control-group"> |
| <h3>위치 및 크기 (선택된 이미지)</h3> |
| <div class="slider-container"> |
| <label for="scale-slider">크기:</label> |
| <input type="range" id="scale-slider" min="10" max="500" value="100" disabled> |
| <span id="scale-value" class="value-display">100%</span> |
| </div> |
| <div class="slider-container"> |
| <label for="rotation-slider">회전:</label> |
| <input type="range" id="rotation-slider" min="0" max="360" value="0" disabled> |
| <span id="rotation-value" class="value-display">0°</span> |
| </div> |
| </div> |
|
|
| <div class="control-group"> |
| <h3>예시 이미지 선택</h3> |
| <div id="example-images-container" style="display: flex; justify-content: space-around; margin-top: 15px;"> |
| <img src="1.png" alt="Example 1" class="example-img" data-filename="1.png" style="width: 160px; height: 160px; cursor: pointer; border: 1px solid #ccc;"> |
| <img src="2.png" alt="Example 2" class="example-img" data-filename="2.png" style="width: 160px; height: 160px; cursor: pointer; border: 1px solid #ccc;"> |
| <img src="3.png" alt="Example 3" class="example-img" data-filename="3.png" style="width: 160px; height: 160px; cursor: pointer; border: 1px solid #ccc;"> |
| <img src="4.png" alt="Example 4" class="example-img" data-filename="4.png" style="width: 160px; height: 160px; cursor: pointer; border: 1px solid #ccc;"> |
| </div> |
| </div> |
| <div class="control-group filter-panel"> |
| </div> |
|
|
| <div class="control-group" id="layers-panel"> |
| <h3>레이어 목록</h3> |
| <div class="layer-option"> |
| <button id="delete-layer-btn" class="danger-btn" disabled>선택 레이어 삭제</button> |
| </div> |
| <div id="layers-list" class="layers-list"> |
| </div> |
| </div> |
| </div> |
| |
| <div class="canvas-container"> |
| <canvas id="canvas" width="800" height="600"></canvas> |
| </div> |
| |
| |
| <div class="filter-panel"> |
| <h3>필터 설정 (선택 레이어에 적용)</h3> |
| |
| <div class="filter-sliders"> |
| <div class="filter-slider-container"> |
| <label for="temperature-slider">색온도:</label> |
| <input type="range" id="temperature-slider" min="-100" max="100" value="0" step="5" class="large-slider"> |
| <span id="temperature-value" class="value-display">0</span> |
| </div> |
| |
| <div class="filter-slider-container"> |
| <label for="brightness-slider">밝기:</label> |
| <input type="range" id="brightness-slider" min="0" max="200" value="100" step="5" class="large-slider"> |
| <span id="brightness-value" class="value-display">100%</span> |
| </div> |
| |
| <div class="filter-slider-container"> |
| <label for="contrast-slider">대비:</label> |
| <input type="range" id="contrast-slider" min="50" max="150" value="100" step="5" class="large-slider"> |
| <span id="contrast-value" class="value-display">100%</span> |
| </div> |
| |
| <div class="filter-slider-container"> |
| <label for="saturation-slider">채도:</label> |
| <input type="range" id="saturation-slider" min="0" max="200" value="100" step="5" class="large-slider"> |
| <span id="saturation-value" class="value-display">100%</span> |
| </div> |
| </div> |
| |
| <div class="filter-buttons"> |
| <button id="reset-filter-btn" class="danger-btn">필터 초기화</button> |
| </div> |
| </div> |
| |
| <div class="button-container"> |
| <button id="generate-btn" class="primary-btn" disabled>이미지 합치기</button> |
| <button id="reset-all-btn" class="danger-btn">처음부터</button> |
| <button id="download-btn" class="info-btn" disabled>다운로드</button> |
| </div> |
| |
| <div class="preview-container" id="preview-container"> |
| <h3>합성된 이미지 미리보기</h3> |
| <img id="preview-img" alt="합성 이미지 미리보기"> |
| </div> |
| </div> |
| |
| |
| <script src="filter.js"></script> |
| <script src="script.js"></script> |
| </body> |
| </html> |
