75 lines
2.4 KiB
PHP
75 lines
2.4 KiB
PHP
<div class="container-dx">
|
|
<h2 style="text-align: center; font-size: 25px; margin-bottom: 10px;">Convert Image to Base64</h2>
|
|
<input type="file" class="image-input" accept="image/*">
|
|
<div class="preview-container" id="preview" style=""></div>
|
|
<textarea class="base64-textarea" readonly></textarea>
|
|
<P style="display: none; text-align: center;" id="copied-notice"></P>
|
|
<button class="copy-button">Copy Base64</button>
|
|
</div>
|
|
|
|
<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;
|
|
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>
|
|
<style>
|
|
.container-dx {
|
|
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);
|
|
margin-top: 100px;
|
|
}
|
|
.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;
|
|
background-color: #7d7d7d;
|
|
}
|
|
.copy-button {
|
|
background-color: #7d7d7d;
|
|
color: white;
|
|
padding: 10px 20px;
|
|
border: none;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
transition: background-color 0.3s;
|
|
}
|
|
.copy-button:hover {
|
|
background-color: #9d9d9d;
|
|
}
|
|
</style> |