Gera Mosaico de 4 imagens

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>

    <title>Mosaico de Imagens</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f4f4f4;
        }

        #mosaic-container {
            display: grid;
            grid-template-rows: repeat(2, 1fr);
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
            max-width: 600px;
            margin: auto;
        }

        .mosaic-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 8px;
        }

        #download-btn {
            margin-top: 20px;
            padding: 10px;
            background-color: #4caf50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
    </style>
    <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
</head>
<body>
<br><br><br><br>
    <form id="imageForm">
        <label for="image1">Imagem 1:</label>
        <input type="file" id="image1" accept="image/*"><br><br>

        <label for="image2">Imagem 2:</label>
        <input type="file" id="image2" accept="image/*"><br><br>

        <label for="image3">Imagem 3:</label>
        <input type="file" id="image3" accept="image/*"><br><br>

        <label for="image4">Imagem 4:</label>
        <input type="file" id="image4" accept="image/*"><br><br>

        <button type="button" onclick="updateMosaic()">Atualizar Mosaico</button>
    </form>

    <div id="mosaic-container">
        <!-- As imagens serão adicionadas dinamicamente aqui -->
    </div>

    <button id="download-btn" onclick="downloadMosaic()">Baixar Mosaico</button>

    <script>
        function updateMosaic() {
            const image1 = document.getElementById("image1").files[0];
            const image2 = document.getElementById("image2").files[0];
            const image3 = document.getElementById("image3").files[0];
            const image4 = document.getElementById("image4").files[0];

            const mosaicContainer = document.getElementById("mosaic-container");
            mosaicContainer.innerHTML = ""; // Limpa qualquer imagem existente

            if (image1 && image2 && image3 && image4) {
                const images = [image1, image2, image3, image4];

                images.forEach((image, index) => {
                    const imgElement = document.createElement("img");
                    imgElement.classList.add("mosaic-image");
                    imgElement.src = URL.createObjectURL(image);
                    imgElement.alt = `Imagem ${index + 1}`;
                    mosaicContainer.appendChild(imgElement);
                });
            } else {
                alert("Por favor, selecione todas as imagens.");
            }
        }

        function downloadMosaic() {
            const mosaicContainer = document.getElementById("mosaic-container");

            html2canvas(mosaicContainer).then(canvas => {
                const link = document.createElement("a");
                link.href = canvas.toDataURL("image/png");
                link.download = "mosaic.png";
                link.click();
            });
        }
    </script>
</body>
</html>