52 lines
2.4 KiB
PHP
52 lines
2.4 KiB
PHP
<section class="diZContainer diZmxAuto">
|
|
<h2 class="diZBorderBottom">Convert Base64 to Image</h2>
|
|
<div class="diZMaxW500 diZmxAuto diZFlexColumn toolsSection diZmy20">
|
|
<textarea rows="10" class="base64-textarea" placeholder="Enter base64 encoded image data"></textarea>
|
|
<p class="diZDisplayNone diZDengerText" id="no-select-message"></p>
|
|
<button class="convert-button diZmt2"><span>Convert to Image</span></button>
|
|
<div class="" id="preview"></div>
|
|
|
|
<div class="diZFlexColumn diZDisplayNone diZJustifyCenter" id="download-options" >
|
|
<p>Choose Image Format & Download:</p>
|
|
<div class="diZFlexRow">
|
|
<button class="format-button" data-format="png"><span>PNG</span></button>
|
|
<button class="format-button" data-format="jpeg"><span>JPEG</span></button>
|
|
<button class="format-button" data-format="webp"><span>WebP</span></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<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> |