'Add a button to download all images from a website
I made a button but I can't get the function to work as I want, does anyone know what code I could use here?
I was thinking of downloading all the images with ZIP and it can be compressed by creating a folder on my server.
I think that a button is better to download them all or individually
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Image Parser</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/style.css" rel="stylesheet">
</head>
<body>
<header class="header-image">
<div class="container">
<h1><strong>Image Parser</strong></h1>
<h3>Enter any URL and get all the images on the page</h3>
<button type="button" class="action-buttons" data-toggle="modal" data-target="#aboutmodal">About</button>
<a href="./api/image-parser.php?url=www.google.com" target="_blank"><button class="action-buttons">Get API</button></a>
</div>
</header>
<hr>
<div class="container">
<div class="row">
<div class="col-md-12">
<form id="form-extractor" class="form-horizontal form-main" method="GET">
<input type="text" class="form-control" name="url" placeholder="Enter the URL from where images are to be extracted" required autofocus>
<br>
<button type="button" id="submit" class="btn btn-lg btn-success">Extract</button>
</form>
</div>
</div>
</div>
<div class="spinner" style="display:none;">
<div class="rect1"></div> <div class="rect2"></div> <div class="rect3"></div> <div class="rect4"></div> <div class="rect5"></div>
</div>
<div id="stats" class="container" style="display:none;">
<div class="row">
<div class="col-xs-12 text-center" id="download-file" >
<a class="btn btn-lg btn-info" target="_blank" href="#">Download zip file</a>
</div>
</div>
</div>
<div id="result" class="other-text">Welcome :)</div>
</div>
<div class="modal fade" id="aboutmodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Image-Parser</h4>
</div>
<div class="modal-body text-justify">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="assets/js/script.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
script.js
$(document).ready(function() {
var spinner = toggleSpinner(),
submit_button = $("#submit");
submit_button.click(function(e) {
e.preventDefault();
spinner();
$.ajax({
url: 'api/image-parser.php?url=' + $('input[name="url"]').val(),
dataType: 'json',
beforeSend: function() {
submit_button.text("Extracting...");
submit_button.prop('disabled', true);
},
success: function(result) {
spinner();
if (result.success) {
renderStats(result);
renderImages(result);
} else {
$('#result').html('Invalid URL!');
}
},
error: function(xhr, resp, text) {
spinner();
$('#result').html('Could not connect to server, please try again later');
},
complete: function() {
submit_button.text("Extract");
submit_button.prop('disabled', false);
}
})
});
});
function renderStats(result) {
var stats =
'<strong>URL Searched</strong> : <a href="' + result.url_searched + '" target="_blank">' + $('input[name="url"]').val() + '</a><br>' +
'<strong>Parent Domain</strong> : <a href="' + result.parent_url + '" target="_blank">' + result.parent_url + '</a><br>';
$('#stats .other-text').empty().append(stats);
}
function renderImages(result) {
var images;
if (0 == result.images.length) {
images = '<b>No Image Found at your Given Location</b>';
} else {
images = result.images.map(function(image) {
return '<a href="' + image + '"><img src="' + image + '" width="250" style="margin:20px"></a>';
});
}
$('#result').empty().append(images);
}
function toggleSpinner() {
var isHidden = true;
return function() {
if (isHidden) {
$('#stats').hide();
$('#result').empty();
$('.spinner').show();
} else {
$('#stats').show();
$('.spinner').hide();
}
isHidden = !isHidden;
}
}
image-parser.php
<?php
/**
* error reporting disabled, if you want to enable it
* change it to "error_reporting(E_ALL)"
* ref : http://php.net/manual/en/function.error-reporting.php
*/
error_reporting(0);
$final_response = get_extracted_images();
echo json_encode($final_response);
/**
* function to extract images from URL in GET Parameter
* @return response object
*/
function get_extracted_images() {
$final_response = array();
$images = array();
if (isset($_GET['url'])) {
$url = $_GET['url'];
$parts = explode('/', trim($url));
/**
* this flag is to check whether user has entered the http or https in the beginning of URL or not
* @var boolean
*/
$flag = ($parts[0] == 'http:' || $parts[0] == 'https:') ? true : false;
if (!$flag)
$url = 'http://' . $url;
/**
* check whether URL entered by user is correct or not
*/
if (!isValidURL($url)) {
return array(
'url_searched' => $url,
'valid_url' => false,
'success' => false
);
} else {
$final_response['valid_url'] = true;
/**
* check if there is a trailing slash (/) or not, if there is one, remove it
*/
if (substr($url, strlen($url) - 1) == '/')
$url = rtrim($url, "/");
$parts = explode('/', $url);
/**
* parent domain name called, if there is a subdomain, it would also be included here
* @var string
*/
$Root = $parts[0] . '//' . $parts[2];
$html = curl_URL_call($url);
if (empty($html)) {
return array(
'url_searched' => $url,
'valid_url' => false,
'success' => false,
'message' => 'We are unable to access the given URL: ' . $url
);
}
$dom = new DOMDocument;
$dom->loadHTML($html);
$final_response['url_searched'] = $url;
$final_response['parent_url'] = $Root;
/**
* check if there is any image in HTML source code or not
*/
if (preg_match_all('/<img[^>]+>/i', $html, $result)) {
$final_response['success'] = true;
foreach ($result[0] as $key) {
preg_match('/src="([^"]+)/i', $key, $src_key);
for ($i = 0; $i < count($src_key); $i += 2) {
$src = $src_key[1];
if (!preg_match("/http:/", $src) && !preg_match("/https:/", $src)) {
/**
* check whether the URL in the src is absolute or relative
* if it is relative, make it absolute
*/
if ($src[0] == '/' && $src[1] == '/') {
$src = 'http:' . $src;
} else if ($src[0] == '/') {
$src = $Root . $src;
} else {
$src = $Root . '/' . $src;
}
}
array_push($images, $src);
}
}
} else {
/**
* No images were found in the HTML
* source code, hence success if false
*/
$final_response['success'] = false;
}
/**
* Getting urls for stylesheets in the webpage
*/
foreach ($dom->getElementsByTagName('link') as $node) {
if ($node->getAttribute("rel") == "stylesheet") {
$css_route = $node->getAttribute("href");
/**
* check whether the URL in the $css_route is absolute or relative
* if it is relative, make it absolute
*/
if ($css_route[0] == '/' && $css_route[1] == '/') {
$css_route = 'http:' . $css_route;
} else if ($css_route[0] == '/') {
$css_route = $Root . $css_route;
} else if ($css_route[0] != 'h') {
$css_route = $Root . '/' . $css_route;
}
$parts = explode('/', $css_route);
$parts_length = sizeof($parts);
$css_root = $parts[0] . '//' . $parts[2];
$css_active_dir = $css_root;
$css_parent_dir = $css_root;
for ($i = 3; $i < $parts_length - 1; ++$i) {
if ($i < $parts_length - 2) {
$css_active_dir = $css_active_dir . '/' . $parts[$i];
$css_parent_dir = $css_parent_dir . '/' . $parts[$i];
} else {
$css_active_dir = $css_active_dir . '/' . $parts[$i];
}
}
$css = curl_URL_call($css_route);
$matches = array();
/**
* Getting image urls using image extension matches in stylesheet extracted
*/
preg_match_all('/url\(\s*[\'"]?(\S*\.(?:jpe?g|gif|png))[\'"]?\s*\)[^;}]*?/i', $css, $matches);
foreach ($matches[1] as $image_link) {
/**
* check whether the URL in the $image_link is absolute or relative
* if it is relative, make it absolute
*/
if ($image_link[0] == '.' && $image_link[1] == '.') {
$image_link = $css_parent_dir . substr($image_link, 2);
} else if ($image_link[0] == '.') {
$image_link = $css_active_dir . substr($image_link, 1);
} else if ($image_link[0] == '/') {
$image_link = $css_active_dir . $image_link;
} else {
$image_link = $css_active_dir . '/' . $image_link;
}
array_push($images, $image_link);
}
}
}
}
/**
* All the images are added to the images array in
* final response
*/
$final_response['images'] = $images;
return $final_response;
} else {
$message = "Please enter a URL to extract information as a 'url' parameter in GET request";
return array(
'url_searched' => null,
'valid_url' => false,
'success' => false,
'message' => $message,
);
}
}
/**
* function to check if the URL entered by the user is correct or not
* @param string $url URL to be passed which is to be checked
* @return boolean returns if URL passed is valid or not
*/
function isValidURL($url){
return preg_match('|^http(s)?://[a-z0-9-]+(.[a-z0-9-]+)*(:[0-9]+)?(/.*)?$|i', $url);
}
/**
* function to make a CURL call in order to fetch the complete HTML source code of URL entered
* @param string $url URL of the page
* @return string HTML source code of the URL entered
*/
function curl_URL_call($url){
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$output = curl_exec($ch);
curl_close($ch);
return $output;
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|