init

2024-05-28 17:52:13 +05:30
commit b9e2e40f11
36 changed files with 2828 additions and 0 deletions
--- a/base64-to-image-converter.php
+++ b/base64-to-image-converter.php
@@ -0,0 +1,107 @@
+<div class="container-ddz">
+    <h2 style="text-align: center; font-size: 25px; margin-bottom: 10px;">Convert Base64 to Image</h2>
+    <textarea class="base64-textarea" placeholder="Enter base64 encoded image data"></textarea>
+    <p id="no-select-message" style="display: none; color: red;"></p>
+    <button class="convert-button">Convert to Image</button>
+    <div class="preview-container" id="preview"></div>
+    <div id="download-options" style="display: none; display: flex; flex-direction: column; justify-content: center; ">
+        <p>Choose Image Format & Download:</p>
+        <div>
+            <button class="format-button" data-format="png">PNG</button>
+            <button class="format-button" data-format="jpeg">JPEG</button>
+            <button class="format-button" data-format="webp">WebP</button>
+            <button id="download-button" style="display: none;">Download Image</button>
+        </div>
+    </div>
+</div>
+
+<script>
+    document.querySelector('.convert-button').addEventListener('click', function() {
+        var base64Data = document.querySelector('.base64-textarea').value.trim();
+        if (base64Data !== '') {
+            var img = document.createElement('img');
+            img.src = base64Data;
+            img.style.maxWidth = '100%';
+            img.style.height = 'auto';
+            document.getElementById('preview').innerHTML = '';
+            document.getElementById('preview').appendChild(img);
+            document.getElementById('download-options').style.display = 'block';
+        } else {
+            document.getElementById('no-select-message').innerHTML = 'Please enter base64 encoded image data.';
+            document.getElementById('no-select-message').style.display = 'block';
+        }
+    });
+
+    // Add event listeners to format buttons
+    var formatButtons = document.querySelectorAll('.format-button');
+    formatButtons.forEach(function(button) {
+        button.addEventListener('click', function() {
+            var imageFormat = this.getAttribute('data-format');
+            downloadImage(imageFormat);
+        });
+    });
+
+    function downloadImage(imageFormat) {
+        var base64Data = document.querySelector('.base64-textarea').value.trim();
+        var downloadLink = document.createElement('a');
+        downloadLink.href = base64Data;
+        downloadLink.download = 'image.' + imageFormat;
+        downloadLink.click();
+    }
+</script>
+
+<style>
+    .container-ddz {
+        max-width: 600px;
+        margin: 0 auto;
+        background-color: #3d3d3d;
+        border-radius: 8px;
+        padding: 20px;
+        box-shadow: 0 2px 4px rgba(255, 255, 255, 0.1);
+    }
+    .preview-container {
+        display: flex;
+        justify-content: center;
+        margin-top: 20px;
+        margin-bottom: 20px;
+    }
+    .base64-textarea {
+        width: 100%;
+        height: 150px;
+        padding: 8px;
+        resize: none;
+        border: 1px solid #ccc;
+        border-radius: 5px;
+        font-size: 14px;
+        box-sizing: border-box;
+    }
+    .convert-button {
+        width: 100%;
+        background-color: #7d7d7d;
+        color: white;
+        padding: 6px 20px;
+        border: none;
+        border-radius: 5px;
+        cursor: pointer;
+        font-size: 14px;
+        transition: background-color 0.3s;
+    }
+    .convert-button:hover {
+        background-color: #9d9d9d;
+    }
+    .format-button {
+        display: inline-block;
+        background-color: #7d7d7d;
+        color: white;
+        padding: 6px 12px;
+        margin: 5px;
+        border: none;
+        border-radius: 5px;
+        cursor: pointer;
+        font-size: 14px;
+        transition: background-color 0.3s;
+    }
+    .format-button:hover {
+        background-color: #9d9d9d;
+    }
+</style>