Image Resizer and Image Compress
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Resizer</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
}
#output-image {
max-width: 100%;
margin-top: 20px;
}
</style>
</head>
<body>
<h1>Image Resizer</h1>
<input type="file" id="inputImage" accept="image/*" onchange="handleImage()">
<label for="resizeWidth">Choose width for output image:</label>
<input type="number" id="resizeWidth" min="1" value="300">
<label for="resizeHeight">Choose height for output image:</label>
<input type="number" id="resizeHeight" min="1" value="200">
<button onclick="resizeImage()">Resize Image</button>
<div id="result" style="display:none;">
<h2>Resized Image</h2>
<img id="output-image" alt="Resized Image">
<br>
<a id="downloadLink" style="display:none;" download="resized_image.jpg">
<button>Download Resized Image</button>
</a>
</div>
<script>
function handleImage() {
var inputImage = document.getElementById('inputImage');
var outputImage = document.getElementById('output-image');
var resultDiv = document.getElementById('result');
resultDiv.style.display = 'none'; // Hide result when a new image is selected
if (inputImage.files && inputImage.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
outputImage.src = e.target.result;
resultDiv.style.display = 'block'; // Show result when an image is selected
document.getElementById('downloadLink').style.display = 'none'; // Hide download link when a new image is selected
};
reader.readAsDataURL(inputImage.files[0]);
}
}
function resizeImage() {
var inputImage = document.getElementById('inputImage');
var outputImage = document.getElementById('output-image');
var resizeWidth = document.getElementById('resizeWidth').value;
var resizeHeight = document.getElementById('resizeHeight').value;
var resultDiv = document.getElementById('result');
resultDiv.style.display = 'block'; // Show result when resizing
outputImage.width = resizeWidth;
outputImage.height = resizeHeight;
var canvas = document.createElement('canvas');
canvas.width = resizeWidth;
canvas.height = resizeHeight;
var ctx = canvas.getContext('2d');
ctx.drawImage(outputImage, 0, 0, resizeWidth, resizeHeight);
outputImage.src = canvas.toDataURL('image/jpeg');
// Show download link
var downloadLink = document.getElementById('downloadLink');
downloadLink.href = canvas.toDataURL('image/jpeg');
downloadLink.style.display = 'block';
}
</script>
</body>
</html>
Meme Generator Code
<html lang="en">
<head>
<meta charset="UTF-8"></meta>
<meta content="IE=edge" http-equiv="X-UA-Compatible"></meta>
<meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>
<title>Meme Generator</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
}
img {
max-width: 100%;
margin-top: 20px;
}
input {
padding: 8px;
font-size: 16px;
margin: 5px;
}
button {
padding: 10px 20px;
font-size: 16px;
border-radius: 5px;
border: none;
background-color: #4CAF50;
color: white;
cursor: pointer;
}
#memeContainer {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 20px;
}
</style>
</head>
<body>
<h1>Meme Generator</h1>
<label for="topText">Top Text:</label>
<br />
<input id="topText" type="text" />
<br />
<label for="bottomText">Bottom Text:</label>
<br />
<input id="bottomText" type="text" />
<br />
<label for="imageInput">Select an image:</label>
<br />
<input accept="image/*" id="imageInput" type="file" />
<br />
<button onclick="generateMeme()">Generate Meme</button>
<div id="memeContainer" style="display: none;">
<h2>Your Meme</h2>
<img alt="Generated Meme" id="memeImage" />
<br />
<a download="generated_meme.jpg" id="downloadLink" style="display: none;">
<button>Download Meme</button>
</a>
</div>
<script>
function generateMeme() {
var topText = document.getElementById('topText').value;
var bottomText = document.getElementById('bottomText').value;
var imageInput = document.getElementById('imageInput');
var memeImage = document.getElementById('memeImage');
var memeContainer = document.getElementById('memeContainer');
var downloadLink = document.getElementById('downloadLink');
// Check if an image is selected
if (imageInput.files && imageInput.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
memeContainer.style.display = 'flex';
downloadLink.style.display = 'block';
const img = new Image();
img.src = e.target.result;
img.onload = function () {
const canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
// Set text properties
ctx.fillStyle = 'white';
ctx.strokeStyle = 'black';
ctx.lineWidth = 4;
ctx.font = '40px Impact';
ctx.textAlign = 'center';
// Draw top text
ctx.fillText(topText, canvas.width / 2, 50);
ctx.strokeText(topText, canvas.width / 2, 50);
// Draw bottom text
ctx.fillText(bottomText, canvas.width / 2, canvas.height - 20);
ctx.strokeText(bottomText, canvas.width / 2, canvas.height - 20);
// Update meme image source with the canvas data
memeImage.src = canvas.toDataURL('image/jpeg');
// Set download link href
downloadLink.href = canvas.toDataURL('image/jpeg');
};
};
reader.readAsDataURL(imageInput.files[0]);
} else {
alert('Please select an image.');
}
}
</script>
</body>
</html>
Comments
Post a Comment