The Palos Publishing Company

Categories We Write About

Create a photo tagging tool

Written by

Bernardo Palos

in

Creating a photo tagging tool involves building a system that can detect objects or people in images and allow users to add descriptive tags or labels. Here’s a straightforward example of a basic photo tagging tool using HTML, JavaScript, and a bit of CSS. This example will let users upload an image, click on the image to create tags (with labels), and display them interactively.

Basic Photo Tagging Tool (Client-side)

html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Simple Photo Tagging Tool</title>
<style>
  body {
    font-family: Arial, sans-serif;
  }
  #image-container {
    position: relative;
    display: inline-block;
    border: 1px solid #ccc;
  }
  #image-container img {
    max-width: 100%;
    display: block;
  }
  .tag {
    position: absolute;
    background-color: rgba(255, 0, 0, 0.7);
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    cursor: pointer;
    transform: translate(-50%, -100%);
  }
  #tags-list {
    margin-top: 20px;
  }
</style>
</head>
<body>

<h2>Photo Tagging Tool</h2>

<input type="file" id="image-upload" accept="image/*" />
<div id="image-container"></div>

<div id="tags-list">
  <h3>Tags</h3>
  <ul id="tags-ul"></ul>
</div>

<script>
  const imageUpload = document.getElementById('image-upload');
  const imageContainer = document.getElementById('image-container');
  const tagsUl = document.getElementById('tags-ul');

  let tags = [];

  imageUpload.addEventListener('change', function () {
    if (this.files && this.files[0]) {
      const reader = new FileReader();
      reader.onload = function (e) {
        imageContainer.innerHTML = `<img id="taggable-image" src="${e.target.result}" alt="Uploaded Image" />`;
        tags = [];
        tagsUl.innerHTML = '';
        setupTagging();
      };
      reader.readAsDataURL(this.files[0]);
    }
  });

  function setupTagging() {
    const img = document.getElementById('taggable-image');
    img.addEventListener('click', function (event) {
      const rect = img.getBoundingClientRect();

      // Calculate click position relative to the image
      const x = event.clientX - rect.left;
      const y = event.clientY - rect.top;

      // Calculate percentages relative to image dimensions for responsiveness
      const xPercent = (x / img.width) * 100;
      const yPercent = (y / img.height) * 100;

      const label = prompt('Enter tag label:');
      if (label && label.trim() !== '') {
        const tag = { xPercent, yPercent, label };
        tags.push(tag);
        renderTag(tag);
        renderTagsList();
      }
    });
  }

  function renderTag(tag) {
    const tagElem = document.createElement('div');
    tagElem.classList.add('tag');
    tagElem.style.left = `${tag.xPercent}%`;
    tagElem.style.top = `${tag.yPercent}%`;
    tagElem.textContent = tag.label;
    tagElem.title = tag.label;
    imageContainer.appendChild(tagElem);

    // Optional: clicking a tag can remove it
    tagElem.addEventListener('click', (e) => {
      e.stopPropagation(); // Prevent adding new tag on image click
      if (confirm(`Remove tag "${tag.label}"?`)) {
        tags = tags.filter(t => t !== tag);
        imageContainer.removeChild(tagElem);
        renderTagsList();
      }
    });
  }

  function renderTagsList() {
    tagsUl.innerHTML = '';
    tags.forEach((tag, index) => {
      const li = document.createElement('li');
      li.textContent = `Tag ${index + 1}: ${tag.label} (X: ${tag.xPercent.toFixed(1)}%, Y: ${tag.yPercent.toFixed(1)}%)`;
      tagsUl.appendChild(li);
    });
  }
</script>

</body>
</html>

How It Works:

  • Upload an image using the file input.

  • Click anywhere on the image to add a tag.

  • A prompt asks for the tag label.

  • Tags appear as small labels on the image at the clicked position.

  • Tags are also listed below the image.

  • Clicking on an existing tag asks for confirmation to remove it.

This is a basic client-side tool for photo tagging. For production use, you would likely want to add:

  • Persistent storage (saving tags to a database or server)

  • Drag-and-drop to reposition tags

  • More sophisticated UI/UX for managing tags

  • Automatic tagging using AI (e.g., image recognition APIs)

  • Mobile/touch optimization

If you want me to help build a more advanced version or add backend support, just let me know!

Share This Page:

Enter your email below to join The Palos Publishing Company Email List

We respect your email privacy

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Check Out Our Newest Posts we wrote about

Categories We Write About