What metadata fields can I edit?

You can add or edit Title, Author/Artist, Copyright, Keywords, and Description/Caption. These are written as JPEG COM (Comment) segments in the output file, which are readable by most photo software.

Will my EXIF camera data be preserved?

Yes. The tool writes the new metadata as additional COM segments while keeping the original JPEG data intact, including any existing EXIF segments.

JPEG COM segments are a simple, universal way to embed text metadata that works without external libraries. PNG, WebP, and TIFF use different metadata formats that require more complex parsers and writers.

Is this the same as full IPTC/XMP editing?

No. Full IPTC/XMP editing requires dedicated software. This tool writes metadata as JPEG comment fields, which is readable by most tools but is not the same as structured IPTC or XMP blocks.

이미지 메타데이터 편집 —제목, 설명 및 저작권 편집

🖼️

JPEG를 여기에 놓거나 클릭하여 찾아보세요

JPEG만 지원 — 메타데이터 쓰기에는 JFIF/EXIF 세그먼트 지원이 필요합니다

이 이미지에서 EXIF 데이터가 감지되지 않았습니다.

제목

작성자 / 아티스트

저작권

키워드 쉼표로 구분

설명 / 캡션

<div class="notice">
          ⚀새 메타데이터는 Comment (COM) 세그먼트를 사용해 새 JPEG 복사본에 기록됩니다. 원본 EXIF 카메라 데이터(조리개, GPS 등)는 그대로 유지됩니다. IPTC 필드를 완전히 IPTC/XMP로 임베딩하려면 전용 소프트웨어가 필요합니다.
        </div>
        <button class="save-btn" id="saveBtn">업데이트된 JPEG 다운로드</button>
      </div>
    </div>
  </div>

<div class="ds-seo-content">
  <section class="ds-seo-section">
    <h2 class="ds-seo-section__title">이미지 메타데이터 편집이란 무엇인가요?</h2>
    <p>이미지 메타데이터 편집에서는 JPEG를 열고 기존 EXIF 카메라 정보(제조사, 모델, 날짜, 크기)를 읽은 뒤 제목, 작성자, 저작권, 키워드, 설명 등의 설명 메타데이터 필드를 추가하거나 편집할 수 있습니다. 새 메타데이터는 다운로드되는 파일 사본에 JPEG COM 세그먼트로 임베드됩니다.</p>
  </section>
  <section class="ds-seo-section">
    <h2 class="ds-seo-section__title">이미지 메타데이터 편집 사용 방법</h2>
    <ol>
      <li>JPEG 파일을 드롭 영역에 놓거나 클릭하여 찾아보세요.</li>
      <li>요약 패널에 표시된 기존 EXIF 데이터를 확인하세요.</li>
      <li>메타데이터 필드(제목, 작성자, 저작권, 키워드, 설명)를 입력하세요.</li>
      <li>편집한 파일을 저장하려면 "업데이트된 JPEG 다운로드"를 클릭하세요.</li>
    </ol>
  </section>
</div>

<div class="ds-related-tools">
  <h2 class="ds-related-title">관련 도구</h2>
  <div class="ds-related-grid">
    <a href="exif-viewer.html" class="ds-related-card"><span class="ds-related-icon">🔍</span><div><div class="ds-related-name">EXIF 뷰어</div><div class="ds-related-desc">모든 이미지에서 카메라 모델, GPS, 노출 정보 및 전체 EXIF 메타데이터를 읽습니다.</div></div></a>
    <a href="remove-exif.html" class="ds-related-card"><span class="ds-related-icon">🛡️</span><div><div class="ds-related-name">EXIF 제거</div><div class="ds-related-desc">사진에서 GPS 위치 및 EXIF 메타데이터 제거</div></div></a>
    <a href="image-to-base64.html" class="ds-related-card"><span class="ds-related-icon">🔢</span><div><div class="ds-related-name">이미지 Base64 변환</div><div class="ds-related-desc">모든 이미지를 HTML/CSS에 삽입할 수 있도록 Base64 문자열 또는 data URI로 변환합니다.</div></div></a>
  </div>
</div>

<details class="ds-seo-more">
  <summary class="ds-seo-more__toggle">
    <span>이미지 메타데이터 이해</span>
    <span class="ds-seo-more__arrow">▾</span>
  </summary>
  <div class="ds-seo-more__body">
    <details class="ds-seo-collapse">
      <summary>예시</summary>
      <div class="ds-seo-collapse__body">
        <div class="ds-seo-example">
          <div class="ds-seo-example__row">
            <span class="ds-seo-example__label">입력</span>
            <span class="ds-seo-example__value">photo.jpg (메타데이터 없음)</span>
          </div>
          <div class="ds-seo-example__row">
            <span class="ds-seo-example__label">출력</span>
            <span class="ds-seo-example__value">photo_edited.jpg, 제목: Sunset | 작성자: Jane Smith | 저작권: 2024</span>
          </div>
        </div>
      </div>
    </details>
    <details class="ds-seo-collapse">
      <summary>일반적인 사용 사례</summary>
      <div class="ds-seo-collapse__body">
        <ul>
          <li>온라인에 사진을 공유하기 전에 저작권을 추가하세요</li>
          <li>보관된 이미지에 제목과 설명을 라벨로 지정하세요</li>
          <li>JPEG 파일의 작성자 표시를 수정하거나 추가하세요</li>
          <li>사진을 검색 가능하게 하려면 키워드를 추가하세요</li>
        </ul>
      </div>
    </details>
    <details class="ds-seo-collapse">
      <summary>이 도구를 사용하는 이유</summary>
      <div class="ds-seo-collapse__body">
        <ul>
          <li>사진을 게시하기 전에 저작권 및 작성자 정보를 추가하세요.</li>
          <li>기존 EXIF Artist 태그가 있으면 작성자 필드를 미리 채웁니다.</li>
          <li>비파괴 — 새 파일을 생성하며 원본을 절대 덮어쓰지 않습니다.</li>
          <li>100% 로컬 — 이미지는 절대 업로드되지 않습니다.</li>
        </ul>
      </div>
    </details>
    <details class="ds-seo-collapse">
      <summary>자주 묻는 질문</summary>
      <div class="ds-seo-collapse__body">
        <div class="ds-seo-faq-item"><strong>어떤 메타데이터 필드를 편집할 수 있나요?</strong><p>제목, 작성자/Artist, 저작권, 키워드, 설명/캡션을 추가하거나 편집할 수 있습니다. 이는 출력 파일에 JPEG COM(Comment) 세그먼트로 기록되며, 대부분의 사진 소프트웨어에서 읽을 수 있습니다.</p></div>
        <div class="ds-seo-faq-item"><strong>EXIF 카메라 데이터도 보존되나요?</strong><p>예. 이 도구는 새 메타데이터를 추가 COM 세그먼트로 기록하면서 기존 EXIF 세그먼트를 포함한 원본 JPEG 데이터를 그대로 유지합니다.</p></div>
        <div class="ds-seo-faq-item"><strong>왜 JPEG만 지원하나요?</strong><p>JPEG COM 세그먼트는 외부 라이브러리 없이 작동하는 텍스트 메타데이터를 삽입하는 간단하고 보편적인 방법입니다. PNG, WebP, TIFF는 더 복잡한 파서와 라이터가 필요한 다른 메타데이터 형식을 사용합니다.</p></div>
        <div class="ds-seo-faq-item"><strong>이것은 전체 IPTC/XMP 편집과 동일한가요?</strong><p>아니요. 전체 IPTC/XMP 편집은 전용 소프트웨어가 필요합니다. 이 도구는 메타데이터를 JPEG 주석 필드로 기록하므로 대부분의 도구에서 읽을 수 있지만, 구조화된 IPTC 또는 XMP 블록과는 다릅니다.</p></div>
      </div>
    </details>
  </div>
</details>

</div>
<script>
  'use strict';

let originalBuf = null;
  let origFileName = 'image.jpg';

// Minimal EXIF reader for display only
  function readExif(buf) {
    const dv = new DataView(buf);
    const fields = {};
    if (dv.getUint16(0) !== 0xFFD8) { document.getElementById('exifReadout').textContent = 'Not a valid JPEG.'; return; }
    let pos = 2;
    while (pos < dv.byteLength - 1) {
      const marker = dv.getUint16(pos);
      if (marker === 0xFFE1) {
        const segLen = dv.getUint16(pos + 2);
        const id = String.fromCharCode(...new Uint8Array(buf, pos + 4, 4));
        if (id === 'Exif') {
          const tiff = pos + 10;
          const le = dv.getUint16(tiff) === 0x4949;
          const ifd0 = tiff + dv.getUint32(tiff + 4, le);
          const n = dv.getUint16(ifd0, le);
          for (let i = 0; i < n; i++) {
            const eOff = ifd0 + 2 + i * 12;
            const tag = dv.getUint16(eOff, le);
            const type = dv.getUint16(eOff + 2, le);
            const count = dv.getUint32(eOff + 4, le);
            if (type === 2) {
              const dataOff = count > 4 ? tiff + dv.getUint32(eOff + 8, le) : eOff + 8;
              let s = '';
              const bytes = new Uint8Array(buf, dataOff, count);
              for (let j = 0; j < count; j++) { if (!bytes[j]) break; s += String.fromCharCode(bytes[j]); }
              if (tag === 0x010F) fields['Make'] = s.trim();
              if (tag === 0x0110) fields['Model'] = s.trim();
              if (tag === 0x0132) fields['DateTime'] = s.trim();
              if (tag === 0x013B) fields['Artist'] = s.trim();
            }
            if (tag === 0xA002 && (type === 3 || type === 4)) {
              fields['Width'] = type === 3 ? dv.getUint16(eOff + 8, le) : dv.getUint32(eOff + 8, le);
            }
            if (tag === 0xA003 && (type === 3 || type === 4)) {
              fields['Height'] = type === 3 ? dv.getUint16(eOff + 8, le) : dv.getUint32(eOff + 8, le);
            }
          }
        }
        pos += 2 + segLen;
        continue;
      }
      if ((marker & 0xFF00) !== 0xFF00) break;
      if (marker === 0xFFD9) break;
      pos += 2 + dv.getUint16(pos + 2);
    }

document.getElementById('exifReadout').innerHTML = parts.length
      ? parts.join('  ·  ')
      : 'No readable EXIF fields found. You can still add metadata fields below.';
  }

// Write metadata as JPEG COM segments
  document.getElementById('saveBtn').addEventListener('click', () => {
    if (!originalBuf) return;

const fields = {
      title: document.getElementById('mTitle').value.trim(),
      author: document.getElementById('mAuthor').value.trim(),
      copyright: document.getElementById('mCopyright').value.trim(),
      keywords: document.getElementById('mKeywords').value.trim(),
      description: document.getElementById('mDesc').value.trim()
    };

const comments = Object.entries(fields)
      .filter(([, v]) => v)
      .map(([k, v]) => `${k.charAt(0).toUpperCase() + k.slice(1)}: ${v}`);

// Build new JPEG: keep SOI + existing segments, inject COM before SOS/EOI
    const encoder = new TextEncoder();
    const parts = [];
    // SOI
    parts.push(new Uint8Array([0xFF, 0xD8]));
    // COM segments
    for (const comment of comments) {
      const data = encoder.encode(comment);
      const segLen = data.length + 2;
      const seg = new Uint8Array(4 + data.length);
      seg[0] = 0xFF; seg[1] = 0xFE;
      seg[2] = (segLen >> 8) & 0xFF; seg[3] = segLen & 0xFF;
      seg.set(data, 4);
      parts.push(seg);
    }
    // Rest of original JPEG (skip original SOI, keep everything else)
    parts.push(originalBuf.slice(2));

const totalLen = parts.reduce((s, p) => s + p.length, 0);
    const out = new Uint8Array(totalLen);
    let offset = 0;
    for (const p of parts) { out.set(p, offset); offset += p.length; }