URL to Image Tool
URL to Image Converter
Captured Image:
body {
font-family: Arial, sans-serif;
background: linear-gradient(to right, #4facfe, #00f2fe);
color: #333;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
width: 90%;
max-width: 500px;
}
h1, h2 {
text-align: center;
color: #007BFF;
}
form {
display: flex;
flex-direction: column;
gap: 10px;
}
label {
font-weight: bold;
}
input {
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
outline: none;
}
input:focus {
border-color: #007BFF;
}
button {
padding: 10px;
background: #007BFF;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background: #0056b3;
}
.hidden {
display: none;
}
#screenshot {
margin-top: 20px;
text-align: center;
}
#screenshot img {
max-width: 100%;
border: 1px solid #ddd;
border-radius: 5px;
}
document.getElementById('urlForm').addEventListener('submit', function (e) {
e.preventDefault();
const url = document.getElementById('urlInput').value;
if (!url) {
alert('Please enter a valid URL.');
return;
}
const iframe = document.createElement('iframe');
iframe.src = url;
iframe.style.width = '800px';
iframe.style.height = '600px';
iframe.style.border = 'none';
document.body.appendChild(iframe);
iframe.onload = function () {
html2canvas(iframe.contentWindow.document.body).then(canvas => {
document.getElementById('screenshot').innerHTML = '';
document.getElementById('screenshot').appendChild(canvas);
document.getElementById('screenshotContainer').classList.remove('hidden');
// Enable download
const downloadButton = document.getElementById('downloadButton');
downloadButton.onclick = () => {
const link = document.createElement('a');
link.download = 'screenshot.png';
link.href = canvas.toDataURL('image/png');
link.click();
};
// Clean up iframe
iframe.remove();
}).catch(err => {
console.error('Error capturing the screenshot:', err);
alert('Failed to capture screenshot.');
});
};
});
