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">將任何圖片轉換成 Base64 字串或 data URI，以便嵌入 HTML/CSS</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>你可以新增或編輯標題、作者/藝術家、版權、關鍵字，以及描述/說明。這些會以 JPEG COM (Comment) 區段寫入輸出檔案，大多數相片軟體都能讀取。</p></div>
        <div class="ds-seo-faq-item"><strong>我的 EXIF 相機資料會被保留嗎？</strong><p>會。此工具會將新的中繼資料寫成額外的 COM 區段，同時保留原始 JPEG 資料不變，包括任何現有的 EXIF 區段。</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; }