/
index.html
89 lines (78 loc) · 3.44 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ImageResolver</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script src="ImageResolver.0.5.2.js" type="text/javascript"></script>
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,900' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="example.css">
<script>
// HTTP Request to other domain are blocked
// We need a CORS proxy
function proxify( request ) {
request.url = "http://www.inertie.org/ba-simple-proxy.php?mode=native&url=" + encodeURIComponent( request.url );
return request;
}
// Create an instance of ImageResolver
// The proxy function is passed as an option
var resolver = new ImageResolver( { requestPlugin : proxify } );
// Register plugins we want to use
// You can use the built-in plugin, or create your own
// Plugins will be called in the order of their registration
resolver.register(new ImageResolver.FileExtension());
resolver.register(new ImageResolver.NineGag());
resolver.register(new ImageResolver.Instagram());
resolver.register(new ImageResolver.ImgurPage());
resolver.register(new ImageResolver.MimeType());
resolver.register(new ImageResolver.Flickr( '6a4f9b6d16c0eaced089c91a2e7e87ad' ));
resolver.register(new ImageResolver.Opengraph());
resolver.register(new ImageResolver.Webpage());
$(function(){
$('form').on('submit', function(e){
e.preventDefault();
$("#url").addClass('loading');
var url = $('#url').val();
resolver.resolve( url, function( result ){
console.log( result );
if ( result ) {
$('body').css('background-image', 'url(' + result.image + ')');
} else {
alert('Can not find image');
}
$("#url").removeClass('loading');
});
});
$('.examples a').on('click', function(e){
e.preventDefault();
$("#url").val($(this).attr('href'));
$('form').trigger('submit');
})
});
</script>
</head>
<body>
<form>
<fieldset>
<label for="url">Enter an URL:</label>
<input type="text" value="" placeholder="http://" name="url" id="url" size="50">
<button type="submit">Extract image</button>
</fieldset>
<ul class="examples">
<li>Try one of these examples:</li>
<li><a href="http://37.media.tumblr.com/d794bfd843e9a04489d17865a58ac700/tumblr_n3ttuxlKFr1st5lhmo1_1280.jpg">JPG url</a></li>
<li><a href="http://imgur.com/kGKMw">imgur.com</a></li>
<li><a href="http://9gag.com/gag/aG9grx0">9gag.com</a></li>
<li><a href="http://www.flickr.com/photos/48202796@N05/7543031692/">flickr.com</a></li>
<li><a href="http://instagram.com/p/InCRT/">instagram.com</a></li>
<li><a href="http://www.imdb.com/title/tt2294629/">imdb.com</a></li>
<li><a href="http://www.theverge.com/2014/5/20/5734090/transistor-review">theverge.com</a></li>
<li><a href="http://dribbble.com/shots/1568411-Pink-smoke">dribbble.com</a></li>
</ul>
<p>
ImageResolver is javascript library that extracts the main image from an URL.<br>
<a href="https://github.com/mauricesvay/ImageResolver">More on github</a>
</p>
</form>
</body>
</html>