Image Resizer Converter
- မိမိ blog site ကို account အရင်ဝင်ပါ
- dashboard ထဲက Pages(or)Posts ကိုနှိပ်
- + အိုင်ကွန်ကိုနှိပ်
- 🖍️ အိုင်ကွန်ကိုနှိပ်၍ < > HTML view ကိုရွေးချယ်၍နှိပ်ပါ
- အောက်က code ကို copy ယူပြီးကူးထည့်ပေးပါ
- save ကိုနှိပ်ပြီးပါပြီ
<div class="container">
<input accept="image/*" id="upload" type="file" />
<div id="imageContainer">
<img alt="Uploaded Image" id="image" src="" />
</div>
<div>
<label>Width: </label>
<input id="width" type="number" placeholder="width number here" />
</div>
<div>
<label>Height: </label>
<input id="height" type="number" placeholder="height number here" />
</div>
<button id="resizeBtn">Resize Image</button>
<button id="clearBtn">Clear</button>
<div id="fileInfo">
<p id="fileSize"></p>
</div>
<div>
<h3>Resized Image</h3>
<canvas id="canvas"></canvas>
</div>
<div id="downloadLinkContainer"></div>
</div>
<style>
box {
font-family: 'Arial', sans-serif;
background-color: #f0f8ff;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
background-color: #fff;
padding: 3px;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
text-align: center;
width: 100%;
}
h1 {
color: #333;
margin-bottom: 20px;
}
input[type="file"] {
margin-top: 20px;
color:#333;
border:1px solid #333;
max-width:100%;
padding:8px;
border-radius: 12px;
}
#image {
width: 100%;
max-height: 20%;
display: none;
margin-top: 20px;
padding:3px;
}
input[type="number"] {
background-color:#fff;
color:#333;
padding: 8px;
margin: 8px 60px;
width: 120px;
font-size: 14px;
border-radius: 12px;
}
label {
color:#333;
}
button {
padding: 12px 20px;
margin: 10px 10px;
border: none;
border-radius: 8px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
}
button#resizeBtn {
background-color: #4CAF50;
color: white;
}
button#resizeBtn:hover {
background-color: #45a049;
}
button#clearBtn {
background-color: #f44336;
color: white;
}
button#clearBtn:hover {
background-color: #e53935;
}
#fileInfo {
margin-top: 10px;
font-size: 14px;
color: #555;
}
#canvas {
max-width:100%;
max-height:100%;
}
#downloadLinkContainer {
margin-top: 20px;
}
#downloadLinkContainer a {
display: inline-block;
background-color: #007bff;
color: white;
padding: 10px 20px;
border-radius: 8px;
text-decoration: none;
margin-top: 10px;
}
#downloadLinkContainer a:hover {
background-color: #0056b3;
}
</style>
<script>
document.getElementById('upload').addEventListener('change', handleImageUpload);
document.getElementById('resizeBtn').addEventListener('click', resizeImage);
document.getElementById('clearBtn').addEventListener('click', clearImage);
let uploadedImage = null;
function handleImageUpload(event) {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(e) {
const img = document.getElementById('image');
img.src = e.target.result;
img.style.display = 'block';
uploadedImage = new Image();
uploadedImage.src = e.target.result;
// Display the file size
const fileSize = (file.size / 1024).toFixed(2); // Convert to KB
document.getElementById('fileSize').textContent = `File size: ${fileSize} KB`;
};
reader.readAsDataURL(file);
}
}
function resizeImage() {
if (!uploadedImage) {
alert('Please upload an image first');
return;
}
const width = parseInt(document.getElementById('width').value);
const height = parseInt(document.getElementById('height').value);
if (!width || !height) {
alert('Please enter both width and height');
return;
}
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
canvas.width = width;
canvas.height = height;
ctx.drawImage(uploadedImage, 0, 0, width, height);
// Create the download link for the resized image
const resizedImageURL = canvas.toDataURL();
const link = document.createElement('a');
link.href = resizedImageURL;
link.download = 'resized-image.png';
link.textContent = 'Download Resized Image';
document.getElementById('downloadLinkContainer').innerHTML = ''; // Clear previous links
document.getElementById('downloadLinkContainer').appendChild(link);
}
function clearImage() {
// Clear everything: image, inputs, file size info, and download link
document.getElementById('upload').value = '';
document.getElementById('image').style.display = 'none';
document.getElementById('fileSize').textContent = '';
document.getElementById('width').value = '';
document.getElementById('height').value = '';
document.getElementById('downloadLinkContainer').innerHTML = '';
uploadedImage = null;
}
</script>
