javascript - Misaligned frames and images - Stack Overflow

admin管理员组

文章数量:1405313

I'm trying to create a photobooth web application. I'm encountering problems when using custom frames I created.

My problem is that the images and my custom frames are misaligned. I tried to adjust the frames but it also adjust the images so it's still misaligned. It works perfectly when just choosing colored frames.

Please help me align the frames and my photostrip.

const photoStrip = document.getElementById('photoStrip');
const photos = JSON.parse(localStorage.getItem('photos')) || [];

photos.forEach(photo => {
  const img = document.createElement('img');
  img.src = photo;
  photoStrip.appendChild(img);
});

// Clear photos from localStorage after displaying
localStorage.removeItem('photos');

document.getElementById('downloadBtn').addEventListener('click', () => {
  html2canvas(photoStrip, {
    onrendered: function(canvas) {
      const link = document.createElement('a');
      link.href = canvas.toDataURL('image/png');
      link.download = 'photo_strip.png';
      link.click();
    }
  });
});

document.getElementById('retakeBtn').addEventListener('click', () => {
  window.location.href = 'camera.html';
});

document.querySelectorAll('.frame, .frame1').forEach(frame => {
  frame.addEventListener('click', () => {
    // Remove selected class from all frames
    document.querySelectorAll('.frame, .frame1').forEach(f => f.classList.remove('selected'));
    // Add selected class to clicked frame
    frame.classList.add('selected');

    const color = frame.getAttribute('data-color');
    const frameSrc = frame.getAttribute('data-frame');

    // Remove existing frame overlay if any
    const existingOverlay = photoStrip.querySelector('.frame-overlay');
    if (existingOverlay) {
      existingOverlay.remove();
    }

    if (frameSrc) {
      photoStrip.style.backgroundColor = 'transparent';
      const overlay = document.createElement('img');
      overlay.src = frameSrc;
      overlay.className = 'frame-overlay';
      photoStrip.appendChild(overlay);

      // Ensure the overlay gets the correct size
      overlay.style.width = "220px";
      overlay.style.height = "740px";

      // Shift photos and photo-strip 10px lower to match custom color positioning
      photoStrip.querySelectorAll('img').forEach(img => {
        img.style.marginTop = '10px';
      });
      photoStrip.style.marginTop = '-10px';
    } else {
      photoStrip.style.backgroundColor = color;

      // Shift photos and photo-strip 10px lower for custom color
      photoStrip.querySelectorAll('img').forEach(img => {
        img.style.marginTop = '10px';
      });
      photoStrip.style.marginTop = '10px';
    }
  });
});

// Add color picker event listener
document.getElementById('colorPicker').addEventListener('input', function(e) {
  // Remove selected class from all frames
  document.querySelectorAll('.frame, .frame1').forEach(f => f.classList.remove('selected'));

  // Remove existing frame overlay if any
  const existingOverlay = photoStrip.querySelector('.frame-overlay');
  if (existingOverlay) {
    existingOverlay.remove();
  }

  // Apply the selected color
  photoStrip.style.backgroundColor = e.target.value;

  // Shift photos and photo-strip 10px lower for custom color
  photoStrip.querySelectorAll('img').forEach(img => {
    img.style.marginTop = '10px';
  });
  photoStrip.style.marginTop = '10px';
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.banner {
  width: 100%;
  height: 100vh;
  /* Ensure it occupies the full viewport height */
  background-image: url(bg3.png);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin: 0;
  /* Remove any default margin */
  padding: 0;
  /* Remove any default padding */
  box-sizing: border-box;
  /* Include padding and border in height calculation */
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
  /* Remove default margin */
  padding: 0;
  /* Remove default padding */
  font-family: 'Cascadia Code', sans-serif;
  overflow: hidden;
  /* Prevent scrolling if content overflows */
}

.photo-strip {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 !important;
  /* Remove padding to align the frame properly */
  background-color: #91A6F7;
  margin-right: 20px;
  position: relative;
  width: 220px;
  height: 740px;
  /* Ensure it matches the frame overlay */
  box-sizing: border-box;
  /* Include padding and border in height calculation */
  margin-top: 0 !important;
  /* Ensure it starts at the top */
  z-index: 5;
  /* Ensure photos are below the frame overlay */
}

.photo-strip img {
  margin: 10px 0;
  width: 200px;
  height: 150px;
  border-radius: 5px;
  z-index: 5;
  /* Ensure photos are below the frame overlay */
}

#downloadBtn,
#retakeBtn {
  font-family: 'Cascadia Code';
  padding: 10px 20px;
  background-color: #91A6F7;
  color: black;
  font-size: 20px;
  width: 175px;
  height: 60px;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  margin: 10px 5px;
}

#retakeBtn {
  background-color: #91A6F7;
}

.frame-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 20px;
  justify-content: center;
}

.frame,
.frame1 {
  top: 0;
  width: 60px;
  height: 60px;
  border-radius: 5px;
  cursor: pointer;
  background-size: cover;
  background-position: center;
}

.color-picker-container {
  margin: 10px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.color-picker-label {
  font-size: 16px;
  color: black;
}

#colorPicker {
  width: 60px;
  height: 60px;
  padding: 0;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
  /* Add spacing below the photo strip */
}

.button-row {
  display: flex;
  justify-content: center;
  width: 100%;
}

.frame-overlay {
  position: absolute;
  top: 0;
  /* Move the frame overlay to the top */
  left: 0;
  width: 220px;
  height: 740px;
  z-index: 10;
  /* Ensure it's above the photos */
  pointer-events: none;
  /* Prevent interaction with the frame overlay */
}

<div class="banner">
  <div class="photo-strip" id="photoStrip">
    <!-- Photos will be appended here -->
  </div>
  <div class="controls">
    <div class="frame-options">
      <div class="frame1" style="background-image: url('frames/frame1.png')" data-frame="frames/frame1.png"></div>
    </div>
    <div class="color-picker-container">
      <span class="color-picker-label">Custom Color:</span>
      <input type="color" id="colorPicker" value="#91A6F7">
    </div>
    <button id="downloadBtn">Download</button>
    <button id="retakeBtn">Retake</button>
  </div>
</div>

本文标签： javascriptMisaligned frames and imagesStack Overflow