<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>URL to Image Tool</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: linear-gradient(45deg, #4facfe, #00f2fe);
color: #fff;
}
.container {
background: #1e1e2f;
border-radius: 12px;
padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
max-width: 500px;
text-align: center;
width: 90%;
}
.container h1 {
margin-bottom: 20px;
font-size: 1.5rem;
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
.form-group input[type="text"] {
width: 100%;
padding: 10px;
border-radius: 8px;
border: none;
outline: none;
font-size: 1rem;
}
.form-group button {
background: #00c6ff;
border: none;
padding: 10px 20px;
border-radius: 8px;
color: #fff;
font-size: 1rem;
cursor: pointer;
transition: 0.3s ease;
}
.form-group button:hover {
background: #0075ff;
}
.image-preview {
margin-top: 20px;
}
.image-preview img {
max-width: 100%;
border-radius: 12px;
}
.error-message {
color: #ff4e4e;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<h1>URL to Image Tool</h1>
<div class="form-group">
<label for="imageUrl">Enter Image URL:</label>
<input type="text" id="imageUrl" placeholder="https://example.com/image.jpg">
</div>
<div class="form-group">
<button id="loadImage">Load Image</button>
</div>
<div class="image-preview" id="imagePreview"></div>
<div class="error-message" id="errorMessage"></div>
</div>
<script>
const loadImageButton = document.getElementById('loadImage');
const imageUrlInput = document.getElementById('imageUrl');
const imagePreview = document.getElementById('imagePreview');
const errorMessage = document.getElementById('errorMessage');
loadImageButton.addEventListener('click', () => {
const imageUrl = imageUrlInput.value.trim();
// Clear previous results
imagePreview.innerHTML = '';
errorMessage.textContent = '';
if (!imageUrl) {
errorMessage.textContent = 'Please enter a valid URL.';
return;
}
// Create a new image element
const img = document.createElement('img');
img.src = imageUrl;
img.alt = 'Preview';
img.onload = () => {
imagePreview.appendChild(img);
};
img.onerror = () => {
errorMessage.textContent = 'Failed to load image. Please check the URL.';
};
});
</script>
</body>
</html>
Friday, January 17, 2025
How to Convert Url to Image
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment