I have a problem with my transparent background image

JavaScript
1

i have this code:

<html>
    <head>
  <title>Custom T-Shirt</title>
  <style>
    /* CSS styling for the t-shirt */
    #tshirt {
      width: 400px;
      height: 600px;
      background-image: url('');
      background-size: contain;
      background-repeat: no-repeat;
      position: relative;
      margin: 50px auto;
      text-align: center;
    }

    /* CSS styling for the text input */
    #textInput {
      margin-top: 20px;
    }

    /* CSS styling for the color selection */
    #colorPicker {
      position: relative;
  z-index: 2;
    }
    #colorPickerOverlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('');
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 1;
}
    /* CSS styling for the file upload */
    #fileInput {
      margin-top: 20px;
    }

    /* CSS styling for the uploaded image */
    .draggable {
      position: absolute;
      cursor: move;
      pointer-events: auto;
    }
  </style>
</head>
<body>
  <div id="tshirt">
  <div id="colorPickerOverlay"></div>
  <input type="color" id="colorPicker" />
  <img id="uploadedImage" src="#" alt="Uploaded Image" class="draggable" style="max-width: 80%; max-height: 80%;" />
</div>

  <input type="file" id="fileInput" />
  <label for="sizeRange">Image Size:</label>
  <input type="range" id="sizeRange" min="0.5" max="2" step="0.1" value="1" />
  <button id="saveButton">Save</button>

  <script src="cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.0/html2canvas"></script>
    <script>
  const colorPicker = document.getElementById('colorPicker');
  const fileInput = document.getElementById('fileInput');
  const uploadedImage = document.getElementById('uploadedImage');
  const tshirt = document.getElementById('tshirt');
  const sizeRange = document.getElementById('sizeRange');
  const saveButton = document.getElementById('saveButton');
  let isDragging = false;
  let startX;
  let startY;

  // Update the t-shirt color on color change
  colorPicker.addEventListener('change', function () {
    tshirt.style.backgroundColor = colorPicker.value;
  });

  // Update the uploaded image
  fileInput.addEventListener('change', function () {
    const file = fileInput.files[0];
    const reader = new FileReader();

    reader.onload = function (e) {
      uploadedImage.src = e.target.result;
    };

    reader.readAsDataURL(file);
  });

  // Make the uploaded image draggable
  uploadedImage.addEventListener('mousedown', startDragging);
  uploadedImage.addEventListener('mouseup', stopDragging);
  uploadedImage.addEventListener('mousemove', drag);

  function startDragging(e) {
    isDragging = true;
    startX = e.clientX - uploadedImage.offsetLeft;
    startY = e.clientY - uploadedImage.offsetTop;
  }

  function stopDragging() {
    isDragging = false;
  }

  function drag(e) {
    if (!isDragging) return;

    e.preventDefault();

    const newX = e.clientX - startX;
    const newY = e.clientY - startY;

    const shirtRect = tshirt.getBoundingClientRect();
    const imageRect = uploadedImage.getBoundingClientRect();

    const minX = shirtRect.left - imageRect.left;
    const maxX = shirtRect.right - imageRect.width - imageRect.left;
    const minY = shirtRect.top - imageRect.top;
    const maxY = shirtRect.bottom - imageRect.height - imageRect.top;

    const boundedX = Math.max(minX, Math.min(newX, maxX));
    const boundedY = Math.max(minY, Math.min(newY, maxY));

    uploadedImage.style.left = boundedX + 'px';
    uploadedImage.style.top = boundedY + 'px';
  }

  // Adjust the size of the uploaded image
  sizeRange.addEventListener('input', function () {
    const scaleFactor = sizeRange.value;
    uploadedImage.style.transform = 'scale(' + scaleFactor + ')';
  });

        // Save the screenshot of the entire screen
        saveButton.addEventListener('click', function () {
            const shirtContainer = document.getElementById('tshirt');
            html2canvas(shirtContainer).then(function (canvas) {
                const screenshotCanvas = document.createElement('canvas');
                const screenshotContext = screenshotCanvas.getContext('2d');

                // Set the canvas size to match the screenshot dimensions
                screenshotCanvas.width = canvas.width;
                screenshotCanvas.height = canvas.height;

                // Draw the screenshot image on the canvas
                screenshotContext.drawImage(canvas, 0, 0);

                // Convert the canvas to an image and download it
                const screenshotURL = screenshotCanvas.toDataURL('image/png');
                const link = document.createElement('a');
                link.href = screenshotURL;
                link.download = 'screenshot.png';
                link.click();
            });
        });
    </script>
</body>
</html>

in here i have a transparent background image that i use as the shirt for my project, but when i try to save it i cant see the shirt because of the transparency anyone know how to fix this?

4

Welcome!

Sorry for my misunderstanding! It was my error. Not yours.

Happy coding!

5

You know if there is a way to fix it