技术需求：实现点击图片时添加元数据（含自定义备注）功能

Got it, let's build this feature step by step! The goal is to let users click an image, add metadata (shooting date, time, custom notes), and keep that data tied to the image. I'll share a client-side vanilla JS solution that works out of the box, with optional extras for better functionality.

1. 基础HTML结构 #

First, set up your images and a modal (popup) for metadata input. We'll use data-id to uniquely identify each image, which helps us link metadata to the right picture:

<div class="image-container">
  <img src="your-image-1.jpg" alt="Sample Image 1" data-id="img-1">
  <img src="your-image-2.jpg" alt="Sample Image 2" data-id="img-2">
</div>

<!-- Metadata Input Modal -->
<div id="metadata-modal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <h3>Add Image Metadata</h3>
    <input type="hidden" id="current-image-id">
    <div>
      <label for="shooting-date">拍摄日期:</label>
      <input type="date" id="shooting-date" required>
    </div>
    <div>
      <label for="shooting-time">拍摄时间:</label>
      <input type="time" id="shooting-time" required>
    </div>
    <div>
      <label for="custom-notes">自定义备注:</label>
      <textarea id="custom-notes" rows="3"></textarea>
    </div>
    <button id="save-metadata">保存元数据</button>
  </div>
</div>

2. 核心JavaScript逻辑 #

This handles the click events, modal interactions, and metadata storage (using localStorage to persist data between page reloads):

// Get elements
const modal = document.getElementById('metadata-modal');
const closeBtn = document.querySelector('.close');
const saveBtn = document.getElementById('save-metadata');
const images = document.querySelectorAll('.image-container img');

// Open modal when image is clicked
images.forEach(img => {
  img.addEventListener('click', () => {
    const imgId = img.dataset.id;
    document.getElementById('current-image-id').value = imgId;
    
    // Populate existing metadata if it exists
    const existingMetadata = JSON.parse(localStorage.getItem(`metadata-${imgId}`)) || {};
    document.getElementById('shooting-date').value = existingMetadata.date || new Date().toISOString().split('T')[0];
    document.getElementById('shooting-time').value = existingMetadata.time || new Date().toTimeString().slice(0,5);
    document.getElementById('custom-notes').value = existingMetadata.notes || '';
    
    modal.style.display = 'block';
  });
});

// Close modal
closeBtn.addEventListener('click', () => {
  modal.style.display = 'none';
});

// Save metadata to localStorage
saveBtn.addEventListener('click', () => {
  const imgId = document.getElementById('current-image-id').value;
  const metadata = {
    date: document.getElementById('shooting-date').value,
    time: document.getElementById('shooting-time').value,
    notes: document.getElementById('custom-notes').value
  };
  
  localStorage.setItem(`metadata-${imgId}`, JSON.stringify(metadata));
  modal.style.display = 'none';
  
  // Optional: Show a confirmation or update the image's display to show metadata
  alert('元数据已保存！');
});

// Close modal when clicking outside
window.addEventListener('click', (e) => {
  if (e.target === modal) {
    modal.style.display = 'none';
  }
});

3. 样式优化（让交互更友好） #

Add some CSS to make the modal look clean and the images feel clickable:

.image-container img {
  width: 300px;
  margin: 10px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.2s;
}

.image-container img:hover {
  border-color: #2196F3;
}

/* Modal Styles */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.4);
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  max-width: 400px;
  border-radius: 8px;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.modal-content div {
  margin: 10px 0;
}

label {
  display: block;
  margin-bottom: 5px;
}

input, textarea {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
  border-radius: 4px;
  border: 1px solid #ccc;
}

button {
  background-color: #2196F3;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #0b7dda;
}

进阶优化建议 #

• 读取图片EXIF数据: If you want to auto-fill the shooting date/time from the image's EXIF data (instead of using current time), you can use the exif-js library. Just add the library script to your HTML, then modify the image click handler to extract EXIF data:

  img.addEventListener('click', () => {
    // ... existing code
    EXIF.getData(img, function() {
      const exifDate = EXIF.getTag(this, 'DateTimeOriginal');
      if (exifDate) {
        const [datePart, timePart] = exifDate.split(' ');
        document.getElementById('shooting-date').value = datePart.replace(/:/g, '-');
        document.getElementById('shooting-time').value = timePart.slice(0,5);
      }
    });
    // ... existing code
  });
  

• 服务器端存储: If you need to persist metadata across devices, replace localStorage with API calls to your backend (e.g., using fetch to send POST/PUT requests to save/retrieve metadata).
• 展示已存元数据: Add a hover tooltip or a dedicated area below each image to display saved metadata, so users can see what's already been added without opening the modal.

内容的提问来源于stack exchange，提问作者Student