41 lines
1.7 KiB
PHP
41 lines
1.7 KiB
PHP
<section class="diZContainer diZmxAuto">
|
|
<h2 class="diZBorderBottom">Convert Image to Base64</h2>
|
|
<div class="diZMaxW600 diZmxAuto toolsSection diZmy20">
|
|
<div class="diZFlexColumn ">
|
|
<input type="file" class="image-input diZmt2" accept="image/*">
|
|
<textarea rows="10" class="base64-textarea diZmt2" readonly></textarea>
|
|
<p class="diZDisplayNone diZTextCenter diZmt2" id="copied-notice"></p>
|
|
<div class="diZmt2" id="preview" ></div>
|
|
<button class="copy-button diZmt2 diZmxAuto"><span>Copy Base64</span></button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<script>
|
|
document.querySelector('.image-input').addEventListener('change', function() {
|
|
var file = this.files[0];
|
|
if (file) {
|
|
var reader = new FileReader();
|
|
reader.onload = function(e) {
|
|
var base64 = e.target.result;
|
|
var img = document.createElement('img');
|
|
img.src = base64;
|
|
img.style.width = '100%';
|
|
document.getElementById('preview').innerHTML = '';
|
|
document.getElementById('preview').appendChild(img);
|
|
document.querySelector('.base64-textarea').value = base64;
|
|
};
|
|
reader.readAsDataURL(file);
|
|
}
|
|
});
|
|
|
|
document.querySelector('.copy-button').addEventListener('click', function() {
|
|
var base64TextArea = document.querySelector('.base64-textarea');
|
|
base64TextArea.select();
|
|
document.execCommand('copy');
|
|
document.getElementById('copied-notice').style.display = 'block';
|
|
document.getElementById('copied-notice').innerHTML = 'Base64 copied to clipboard!';
|
|
});
|
|
</script>
|