Privacy Blur

by Ben Gillbanks

HTML

<input type="file" id="upload-input" accept="image/*">
<div id="image-container">
  <img id="uploaded-image" src="#" alt="Uploaded Image">
</div>

CSS

#image-container {
    position: relative;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
  }
  #uploaded-image {
    max-width: 100%;
    height: auto;
  }
  .blur-overlay {
    position: absolute;
    top: 0;
    bottom:0;
    left: 0;
    right: 0;
    cursor: pointer;
    overflow: hidden;
  }
  .blur-selection {
      backdrop-filter: blur(20px); /* Adjust the blur radius as needed */
      background: rgba(0,0,0,0.2);
  }

JavaScript

document.getElementById('upload-input').addEventListener('change', function(e) {
  const file = e.target.files[0];
  const reader = new FileReader();

  reader.onload = function(event) {
    const img = document.getElementById('uploaded-image');
    img.src = event.target.result;

    img.onload = function() {
      const overlay = createOverlay(img.width, img.height);
      const rect = img.getBoundingClientRect();

      overlay.addEventListener('mousedown', handleMouseDown.bind(null, overlay, rect));
    }
  }

  reader.readAsDataURL(file);
});

function createOverlay(width, height) {
  const overlay = document.createElement('div');
  overlay.classList.add('blur-overlay');
  overlay.style.width = width + 'px';
  overlay.style.height = height + 'px';
  document.getElementById('image-container').appendChild(overlay);
  return overlay;
}

function handleMouseDown(overlay, rect, e) {
  const startX = e.clientX;
  const startY = e.clientY;
  const target = e.target;

  if (target === overlay) {
    startDrawing(overlay, startX-rect.left, startY-rect.top);
  } else if (target.classList.contains('blur-selection')) {
    startDragging(target, startX, startY);
  }
}



function startDrawing(overlay, startX, startY) {
  const selection = document.createElement('div');
  selection.classList.add('blur-selection');
  selection.style.position = 'absolute';
  selection.style.left = startX + 'px';
  selection.style.top = startY + 'px';
  overlay.appendChild(selection);
  
  
  // Create a delete button/icon
  const deleteButton = document.createElement('button');
  deleteButton.classList.add('delete-button');
  deleteButton.innerHTML = 'Ă—'; // You can use any icon or text for the delete button
  deleteButton.addEventListener('click', function() {
    overlay.removeChild(selection); // Remove the blur region when delete is clicked
  });
  selection.appendChild(deleteButton);
  

  function moveSelection(e) {
    const currentX = e.clientX -...