1#@!#!123s

22527 1#@!#!123s
: / data / letsfame / assets / js / book-artist / dist /
Filename : cropper.js
back
const fileInput = document.getElementById('fileInput');
const cropModal = document.getElementById('cropModal');
const cropContainer = document.getElementById('cropContainer');
const image = document.getElementById('image');
const cropBox = document.getElementById('cropBox');
const cropButton = document.getElementById('cropButton');
const closeModalButton = document.getElementById('closeModalButton');
const outputCanvas = document.getElementById('outputCanvas');

// Open the modal after uploading an image
fileInput.addEventListener('change', (event) => {
  const file = event.target.files[0];
  if (file) {
    const reader = new FileReader();
    reader.onload = (e) => {
      image.src = e.target.result;
      image.style.display = 'block';
      image.onload = () => {
        cropModal.style.display = 'flex'; // Show modal
        cropContainer.style.width = `${image.width}px`;
        cropContainer.style.height = `${image.height}px`;

        // Center the crop box
        const cropBoxWidth = cropBox.offsetWidth;
        const cropBoxHeight = cropBox.offsetHeight;
        cropBox.style.left = `${(image.width - cropBoxWidth) / 2}px`;
        cropBox.style.top = `${(image.height - cropBoxHeight) / 2}px`;
        cropBox.style.display = 'block';
      };
    };
    reader.readAsDataURL(file);
  }
});

// Enable dragging the crop box
cropBox.addEventListener('mousedown', (event) => {
  let shiftX = event.clientX - cropBox.getBoundingClientRect().left;
  let shiftY = event.clientY - cropBox.getBoundingClientRect().top;

  const onMouseMove = (event) => {
    const newLeft = event.clientX - shiftX - cropContainer.getBoundingClientRect().left;
    const newTop = event.clientY - shiftY - cropContainer.getBoundingClientRect().top;

    cropBox.style.left = `${Math.max(0, Math.min(newLeft, cropContainer.offsetWidth - cropBox.offsetWidth))}px`;
    cropBox.style.top = `${Math.max(0, Math.min(newTop, cropContainer.offsetHeight - cropBox.offsetHeight))}px`;
  };

  document.addEventListener('mousemove', onMouseMove);

  document.addEventListener('mouseup', () => {
    document.removeEventListener('mousemove', onMouseMove);
  }, { once: true });
});
// Perform cropping
cropButton.addEventListener('click', () => {
    const cropRect = cropBox.getBoundingClientRect();
    const imageRect = image.getBoundingClientRect();
  
    // Calculate the scaling factors
    const scaleX = image.naturalWidth / imageRect.width;
    const scaleY = image.naturalHeight / imageRect.height;
  
    // Calculate the crop coordinates in the image's natural dimensions
    const cropX = (cropRect.left - imageRect.left) * scaleX;
    const cropY = (cropRect.top - imageRect.top) * scaleY;
    const cropWidth = cropBox.offsetWidth * scaleX;
    const cropHeight = cropBox.offsetHeight * scaleY;
  
    // Set the canvas dimensions to match the crop box
    const canvas = outputCanvas;
    canvas.width = cropWidth;
    canvas.height = cropHeight;
  
    // Draw the cropped image on the canvas
    const ctx = canvas.getContext('2d');
    ctx.drawImage(
      image,
      cropX, cropY, cropWidth, cropHeight, // Source
      0, 0, canvas.width, canvas.height   // Destination
    );
  
    // Hide the modal
    cropModal.style.display = 'none';
  });
  
// Close the modal
closeModalButton.addEventListener('click', () => {
  cropModal.style.display = 'none';
});