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

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

@@ -1,20 +1,21 @@
<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; ">
<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">Convert to Image</button>
<div class="" id="preview"></div>
<div class="diZFlexColumn diZDisplayNone diZJustifyCenter" id="download-options" >
<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>
</div>
</section>
<script>
document.querySelector('.convert-button').addEventListener('click', function() {
var base64Data = document.querySelector('.base64-textarea').value.trim();
@@ -48,60 +49,4 @@
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>
</script>