In today’s digital age, images play a vital role in web content. Whether you’re a developer, a designer, or a researcher, you may often find yourself needing to extract images from a webpage. Manually saving images can be a tedious task, especially when dealing with multiple images. This is where an automated web image downloader becomes incredibly useful.
A web image downloader allows users to input a website URL, extract all the images from that page, and download them with ease. This tutorial will guide you through building a functional and aesthetically pleasing web application that scans a webpage for images and enables users to download them efficiently.
Follow this video for complete guidance :
Webpage Image Downloader – Full Source Code
<?php
function getImages($url) {
$html = @file_get_contents($url);
if (!$html) return [];
$dom = new DOMDocument();
@$dom->loadHTML($html);
$images = [];
foreach ($dom->getElementsByTagName('img') as $img) {
$src = $img->getAttribute('src');
if (strpos($src, 'http') !== 0) {
$src = (strpos($src, '//') === 0) ? 'https:' . $src : rtrim($url, '/') . '/' . ltrim($src, '/');
}
$images[] = $src;
}
return $images;
}
if (isset($_POST['url'])) {
echo json_encode(getImages($_POST['url']));
exit;
}
if (isset($_POST['download'])) {
$url = $_POST['download'];
$dir = 'downloads';
if (!is_dir($dir)) mkdir($dir);
$filename = $dir . '/' . basename(parse_url($url, PHP_URL_PATH));
file_put_contents($filename, file_get_contents($url));
echo json_encode(['status' => 'success', 'file' => $filename]);
exit;
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Image Downloader</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<style>
body {
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
min-height: 100vh;
}
.card {
border: none;
border-radius: 15px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
transition: transform 0.3s;
}
.card:hover {
transform: translateY(-5px);
}
.main-card {
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10px);
}
.image-card {
overflow: hidden;
}
.image-card img {
transition: transform 0.3s;
}
.image-card:hover img {
transform: scale(1.05);
}
.btn-primary {
background: linear-gradient(45deg, #4776E6, #8E54E9);
border: none;
}
.btn-success {
background: linear-gradient(45deg, #11998e, #38ef7d);
border: none;
}
.input-group {
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.form-control {
border: none;
padding: 15px;
}
.form-control:focus {
box-shadow: none;
}
.page-title {
color: #4776E6;
font-weight: 700;
text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
}
#notification {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 1000;
}
</style>
</head>
<body class="py-5">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-10">
<div class="card main-card mb-4">
<div class="card-body p-4">
<h2 class="page-title text-center mb-4">
<i class="fas fa-images me-2"></i>Web Image Downloader
</h2>
<div class="input-group mb-4">
<input type="url" id="url" class="form-control"
placeholder="Enter website URL here...">
<button id="scan" class="btn btn-primary px-4">
<i class="fas fa-search me-2"></i>Scan
</button>
</div>
<div id="results" class="row g-4"></div>
</div>
</div>
</div>
</div>
</div>
<div id="notification"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
function showNotification(message, type = 'success') {
$('#notification').html(`
<div class="alert alert-${type} alert-dismissible fade show" role="alert">
${message}
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
`).fadeIn();
setTimeout(() => $('#notification').fadeOut(), 3000);
}
$('#scan').click(function() {
let url = $('#url').val();
if (!url) {
showNotification('Please enter a valid URL', 'warning');
return;
}
$(this).html('<i class="fas fa-spinner fa-spin me-2"></i>Scanning...');
$.post('', {url: url}, function(images) {
$('#results').empty();
if (images.length === 0) {
showNotification('No images found on this webpage', 'info');
return;
}
images.forEach(img => {
$('#results').append(`
<div class="col-md-4">
<div class="card image-card h-100">
<div style="height: 200px; overflow: hidden;">
<img src="${img}" class="card-img-top h-100 w-100" style="object-fit: cover">
</div>
<div class="card-body text-center">
<button class="btn btn-success download w-100" data-url="${img}">
<i class="fas fa-download me-2"></i>Download
</button>
</div>
</div>
</div>
`);
});
showNotification(`Found ${images.length} images`);
})
.fail(() => showNotification('Failed to scan webpage', 'danger'))
.always(() => $('#scan').html('<i class="fas fa-search me-2"></i>Scan'));
});
$(document).on('click', '.download', function() {
let btn = $(this);
btn.prop('disabled', true)
.html('<i class="fas fa-spinner fa-spin me-2"></i>Downloading...');
$.post('', {download: btn.data('url')}, function(response) {
btn.removeClass('btn-success')
.addClass('btn-secondary')
.html('<i class="fas fa-check me-2"></i>Downloaded');
showNotification('Image downloaded successfully');
})
.fail(() => {
btn.prop('disabled', false)
.html('<i class="fas fa-download me-2"></i>Retry');
showNotification('Failed to download image', 'danger');
});
});
});
</script>
</body>
</html>
Developing Your Own Chat with Stranger System Using PHP
Why Build an Image Downloader?
Before diving into the implementation, let’s explore some of the benefits of building an image downloader:
- Automation: No need to manually save multiple images; a simple click does the job.
- Efficiency: Reduces time spent finding and downloading images individually.
- Educational Value: Reinforces PHP, JavaScript, and DOM manipulation concepts.
- Useful for Developers & Designers: Quickly gather images for design inspiration, research, or content curation.
Features of Our Web Image Downloader
Our tool will have the following features:
- Accepts a webpage URL as input.
- Extracts all images from the given URL.
- Displays the images dynamically in a user-friendly interface.
- Allows users to download images individually.
- Provides visual feedback through notifications and UI enhancements.
Understanding the Core Functionality
The image downloader application is powered by PHP and JavaScript. Here’s how the process works:
- User Inputs a URL: The application takes a website URL from the user.
- Fetching HTML Content: PHP retrieves the HTML of the provided URL.
- Parsing Images: The script extracts all
<img>tags and theirsrcattributes. - Displaying Images: The extracted image URLs are displayed in a grid layout.
- Downloading Images: Users can click a button to download any image they want.
- Providing Feedback: Notifications inform users about scan results and downloads.
User Interface Design
A clean and modern UI enhances usability. Our design includes:
- A responsive layout using Bootstrap for mobile and desktop compatibility.
- A gradient background for a visually appealing look.
- Cards with hover effects to highlight images interactively.
- Buttons with animations to improve user experience.
- Notifications to display success and error messages dynamically.
JavaScript for User Interaction
JavaScript and jQuery handle:
- Sending AJAX requests to fetch images from the server.
- Displaying the results dynamically without reloading the page.
- Enabling real-time feedback through alerts and UI changes.
- Managing the download functionality efficiently.
Enhancements & Future Improvements
While our tool is functional, there are several ways to improve it:
- Bulk Download: Add an option to download all images at once.
- Filtering: Allow users to filter images by size, format, or resolution.
- Better Error Handling: Improve how the system handles invalid URLs and inaccessible pages.
- Cloud Integration: Save extracted images to cloud storage like Google Drive or Dropbox.
- Image Processing: Offer resizing, compression, or conversion before downloading.
Building a web image downloader using PHP and JavaScript is a great way to improve your development skills while creating a useful tool. By leveraging PHP for server-side processing and JavaScript for a dynamic user experience, we achieve an efficient and user-friendly application. With further refinements, this tool can be transformed into a powerful web scraping utility tailored to specific needs.
Start experimenting with this project and explore ways to enhance its functionality. Whether for personal use or professional applications, an image downloader is a handy tool to have in your arsenal!
