JSFiddle - React, Tailwind, and code Playground

by Rapha Souza

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Converter URL em Base64</title>
</head>
<body>
    <h1>Converter URL de Imagem em Base64</h1>
    <input type="text" id="imageUrl" placeholder="Insira a URL da imagem">
    <button onclick="convertToBase64()">Converter</button>
    <p id="base64Output"></p>


</body>

JavaScript

async function convertToBase64() {
    const imageUrl = document.getElementById('imageUrl').value;
    const base64Output = document.getElementById('base64Output');
    
    try {
        const response = await fetch(imageUrl);
        const blob = await response.blob();
        const reader = new FileReader();
        
        reader.onloadend = function() {
            base64Output.textContent = reader.result;
        };
        
        reader.readAsDataURL(blob);
    } catch (error) {
        base64Output.textContent = 'Erro ao converter a URL em Base64: ' + error;
    }
}