gubleo/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
    <title>Recorte de Imagens</title>
    <!-- Link para o arquivo CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cropperjs@1.5.12/dist/cropper.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

</head>
<body>  <div class="container mt-5">
    <div class="row">
        <div class="col-md-6 offset-md-3">
            <!-- Adiciona o contêiner para a imagem que será recortada -->
            <div id="imagemContainer" class="mb-4">
                <img id="imagem" src="" alt="Imagem para recortar" class="img-fluid">
            </div>

            <!-- Formulário para enviar a imagem -->
            <form id="uploadForm" enctype="multipart/form-data">
                <div class="form-group">
                    <input type="file" id="imagemInput" accept="image/*" required class="form-control">
                </div>
                <div class="form-group">
                    <button type="submit" class="btn btn-primary">Processar Imagem</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    const imagemInput = document.getElementById('imagemInput');
    const imagem = document.getElementById('imagem');
    const uploadForm = document.getElementById('uploadForm');
    const imagemContainer = document.getElementById('imagemContainer');
    let cropper;

    // Adiciona um evento de mudança no input de imagem para exibir a imagem selecionada
    imagemInput.addEventListener('change', (event) => {
        const file = event.target.files[0];
        const reader = new FileReader();

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

        reader.readAsDataURL(file);

        // Destroi o cropper anterior, se houver
        if (cropper) {
            cropper.destroy();
        }

        // Cria o novo cropper com a imagem carregada
        imagem.onload = function () {
            cropper = new Cropper(imagem, {
                viewMode: 2, // Define o modo de visualização (opcional)
                autoCropArea: 0.8, // Define a área inicial de recorte (opcional)
            });
        };
    });

    // Adiciona um evento de submit no formulário para realizar o recorte
    uploadForm.addEventListener('submit', (event) => {

        event.preventDefault();

        // Obtém o recorte da imagem
        const croppedCanvas = cropper.getCroppedCanvas();

        // Converte a imagem recortada para base64
        const base64Image = croppedCanvas.toDataURL();

        // Exibe a imagem recortada (opcional)
        const recorteImagem = document.createElement('img');
        recorteImagem.src = base64Image;
        document.body.appendChild(recorteImagem);
    });
</script>

<!-- Link para o arquivo JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/cropperjs@1.5.12/dist/cropper.min.js"></script>

<!-- Adicionando os scripts do Bootstrap -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Recorte de Imagens</title>
	<!-- Link para o arquivo CSS -->
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cropperjs@1.5.12/dist/cropper.min.css">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

	</head>
	<body> <div class="container mt-5">
	<div class="row">
	<div class="col-md-6 offset-md-3">
	<!-- Adiciona o contêiner para a imagem que será recortada -->
	<div id="imagemContainer" class="mb-4">
	<img id="imagem" src="" alt="Imagem para recortar" class="img-fluid">
	</div>

	<!-- Formulário para enviar a imagem -->
	<form id="uploadForm" enctype="multipart/form-data">
	<div class="form-group">
	<input type="file" id="imagemInput" accept="image/*" required class="form-control">
	</div>
	<div class="form-group">
	<button type="submit" class="btn btn-primary">Processar Imagem</button>
	</div>
	</form>
	</div>
	</div>
	</div>

	<script>
	const imagemInput = document.getElementById('imagemInput');
	const imagem = document.getElementById('imagem');
	const uploadForm = document.getElementById('uploadForm');
	const imagemContainer = document.getElementById('imagemContainer');
	let cropper;

	// Adiciona um evento de mudança no input de imagem para exibir a imagem selecionada
	imagemInput.addEventListener('change', (event) => {
	const file = event.target.files[0];
	const reader = new FileReader();

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

	reader.readAsDataURL(file);

	// Destroi o cropper anterior, se houver
	if (cropper) {
	cropper.destroy();
	}

	// Cria o novo cropper com a imagem carregada
	imagem.onload = function () {
	cropper = new Cropper(imagem, {
	viewMode: 2, // Define o modo de visualização (opcional)
	autoCropArea: 0.8, // Define a área inicial de recorte (opcional)
	});
	};
	});

	// Adiciona um evento de submit no formulário para realizar o recorte
	uploadForm.addEventListener('submit', (event) => {

	event.preventDefault();

	// Obtém o recorte da imagem
	const croppedCanvas = cropper.getCroppedCanvas();

	// Converte a imagem recortada para base64
	const base64Image = croppedCanvas.toDataURL();

	// Exibe a imagem recortada (opcional)
	const recorteImagem = document.createElement('img');
	recorteImagem.src = base64Image;
	document.body.appendChild(recorteImagem);
	});
	</script>

	<!-- Link para o arquivo JavaScript -->
	<script src="https://cdn.jsdelivr.net/npm/cropperjs@1.5.12/dist/cropper.min.js"></script>

	<!-- Adicionando os scripts do Bootstrap -->
	<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

	</body>
	</html>