107 lines
3.7 KiB
PHP
107 lines
3.7 KiB
PHP
<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> |