Build a Image to Base64 Converter & Vice Versa Web App in Browser Using JavaScript

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Base64 Image Converter</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <style>
        .preview-image {
            max-width: 100%;
            max-height: 300px;
            margin-bottom: 20px;
        }
    </style>
</head>
<body class="bg-gray-100 p-4">
    <div class="max-w-md mx-auto bg-white p-6 rounded-md shadow-md">
        <h1 class="text-2xl font-bold mb-4">Base64 Image Converter</h1>

        <!-- Tabs for switching between sections -->
        <div class="flex justify-around mb-4">
            <button id="image-to-base64-btn" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
                Image to Base64
            </button>
            <button id="base64-to-image-btn" class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">
                Base64 to Image
            </button>
        </div>

        <!-- Image to Base64 Section -->
        <div id="image-to-base64-section" class="hidden">
            <form id="image-to-base64-form" class="mb-4">
                <div class="mb-4">
                    <label class="block text-gray-700 text-sm font-bold mb-2" for="image-file">Select an Image:</label>
                    <input type="file" id="image-file" name="image-file" accept="image/*" required>
                </div>
                <button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
                    Convert to Base64
                </button>
            </form>

            <div id="image-preview" class="hidden">
                <h2 class="text-lg font-bold mb-2">Base64 String:</h2>
                <textarea id="base64-output" class="w-full p-2 border border-gray-300 rounded" rows="5" readonly></textarea>
                <button id="copy-button" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-4">
                    Copy to Clipboard
                </button>
            </div>
        </div>

        <!-- Base64 to Image Section -->
        <div id="base64-to-image-section" class="hidden">
            <form id="base64-to-image-form" class="mb-4">
                <div class="mb-4">
                    <label class="block text-gray-700 text-sm font-bold mb-2" for="base64-input">Enter Base64 String:</label>
                    <textarea id="base64-input" class="w-full p-2 border border-gray-300 rounded" rows="5" required></textarea>
                </div>
                <button type="submit" class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">
                    Convert to Image
                </button>
            </form>

            <div id="image-output" class="hidden">
                <h2 class="text-lg font-bold mb-2">Converted Image:</h2>
                <img id="output-image" class="preview-image" src="" alt="Converted Image">
            </div>
        </div>
    </div>

    <script>
        // Elements for toggling between sections
        const imageToBase64Btn = document.getElementById('image-to-base64-btn');
        const base64ToImageBtn = document.getElementById('base64-to-image-btn');
        const imageToBase64Section = document.getElementById('image-to-base64-section');
        const base64ToImageSection = document.getElementById('base64-to-image-section');

        // Show/hide sections based on button clicks
        imageToBase64Btn.addEventListener('click', () => {
            imageToBase64Section.classList.remove('hidden');
            base64ToImageSection.classList.add('hidden');
        });

        base64ToImageBtn.addEventListener('click', () => {
            base64ToImageSection.classList.remove('hidden');
            imageToBase64Section.classList.add('hidden');
        });

        // Image to Base64 conversion
        document.getElementById('image-to-base64-form').addEventListener('submit', function(event) {
            event.preventDefault();
            const imageFile = document.getElementById('image-file').files[0];
            if (!imageFile) {
                alert('Please select an image file.');
                return;
            }

            const reader = new FileReader();
            reader.onload = function(event) {
                const base64String = event.target.result;
                displayBase64String(base64String);
            };
            reader.readAsDataURL(imageFile);
        });

        function displayBase64String(base64String) {
            const base64Output = document.getElementById('base64-output');
            const imagePreview = document.getElementById('image-preview');
            const copyButton = document.getElementById('copy-button');

            base64Output.value = base64String;
            imagePreview.classList.remove('hidden');

            copyButton.onclick = function() {
                navigator.clipboard.writeText(base64Output.value).then(() => {
                    alert('Base64 string copied to clipboard!');
                }).catch(err => {
                    alert('Failed to copy the Base64 string: ' + err);
                });
            };
        }

        // Base64 to Image conversion
        document.getElementById('base64-to-image-form').addEventListener('submit', function(event) {
            event.preventDefault();
            const base64Input = document.getElementById('base64-input').value.trim();
            if (!base64Input) {
                alert('Please enter a Base64 string.');
                return;
            }

            displayConvertedImage(base64Input);
        });

        function displayConvertedImage(base64String) {
            const imageOutput = document.getElementById('image-output');
            const outputImage = document.getElementById('output-image');

            outputImage.src = base64String;
            imageOutput.classList.remove('hidden');
        }
    </script>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

<!DOCTYPE html>

<head>

<title>Base64 Image Converter</title>

<style>

.preview-image {

max-width: 100%;

max-height: 300px;

margin-bottom: 20px;

}

</style>

</head>

<h1 class="text-2xl font-bold mb-4">Base64 Image Converter</h1>

Image to Base64

</button>

Base64 to Image

</button>

</div>

<label class="block text-gray-700 text-sm font-bold mb-2" for="image-file">Select an Image:</label>

</div>

Convert to Base64

</button>

</form>

<h2 class="text-lg font-bold mb-2">Base64 String:</h2>

Copy to Clipboard

</button>

</div>

<label class="block text-gray-700 text-sm font-bold mb-2" for="base64-input">Enter Base64 String:</label>

</div>

Convert to Image

</button>

</form>

<h2 class="text-lg font-bold mb-2">Converted Image:</h2>

</div>

// Elements for toggling between sections

const imageToBase64Btn = document.getElementById('image-to-base64-btn');

const base64ToImageBtn = document.getElementById('base64-to-image-btn');

const imageToBase64Section = document.getElementById('image-to-base64-section');

const base64ToImageSection = document.getElementById('base64-to-image-section');

// Show/hide sections based on button clicks

imageToBase64Btn.addEventListener('click', () => {

imageToBase64Section.classList.remove('hidden');

base64ToImageSection.classList.add('hidden');

});

base64ToImageBtn.addEventListener('click', () => {

base64ToImageSection.classList.remove('hidden');

imageToBase64Section.classList.add('hidden');

});

// Image to Base64 conversion

document.getElementById('image-to-base64-form').addEventListener('submit', function(event) {

event.preventDefault();

const imageFile = document.getElementById('image-file').files[0];

if (!imageFile) {

alert('Please select an image file.');

return;

}

const reader = new FileReader();

reader.onload = function(event) {

const base64String = event.target.result;

displayBase64String(base64String);

};

reader.readAsDataURL(imageFile);

});

function displayBase64String(base64String) {

const base64Output = document.getElementById('base64-output');

const imagePreview = document.getElementById('image-preview');

const copyButton = document.getElementById('copy-button');

base64Output.value = base64String;

imagePreview.classList.remove('hidden');

copyButton.onclick = function() {

navigator.clipboard.writeText(base64Output.value).then(() => {

alert('Base64 string copied to clipboard!');

}).catch(err => {

alert('Failed to copy the Base64 string: ' + err);

});

};

}

// Base64 to Image conversion

document.getElementById('base64-to-image-form').addEventListener('submit', function(event) {

event.preventDefault();

const base64Input = document.getElementById('base64-input').value.trim();

if (!base64Input) {

alert('Please enter a Base64 string.');

return;

}

displayConvertedImage(base64Input);

});

function displayConvertedImage(base64String) {

const imageOutput = document.getElementById('image-output');

const outputImage = document.getElementById('output-image');

outputImage.src = base64String;

imageOutput.classList.remove('hidden');

}

</script>

</body>

</html>

Build a Image to Base64 Converter & Vice Versa Web App in Browser Using JavaScript

Comments

Leave a Reply Cancel reply

Archives