dwd/tools
2
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

s2

Browse Source
This commit is contained in:
Suvodip
2024-07-06 21:19:02 +05:30
parent b9e2e40f11
commit d368213568
23 changed files with 879 additions and 591 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
image-to-base64-converter.php
View File

@@ -1,11 +1,16 @@
<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>
<section class="diZContainer diZmxAuto">
<h2 class="diZBorderBottom">Convert Image to Base64</h2>
<div class="diZMaxW500 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">Copy Base64</button>
</div>
</div>
</section>
<script>
document.querySelector('.image-input').addEventListener('change', function() {
@@ -16,6 +21,7 @@
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;
@@ -32,44 +38,3 @@
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>