-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathurltoimg.html
79 lines (74 loc) · 3.32 KB
/
urltoimg.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
<!DOCTYPE html>
<html lang="en">
<head>
<title><img> generator</title>
<meta property="og:site_name" content="orbit-loona.github.io" />
<meta property="og:type" content="website" />
<meta property="og:title" content="<img> generator" />
<meta property="og:url" content="https://orbit-loona.github.io/urltoimg.html" />
<meta property="og:description" content="URLs go in, HTML <img/>s come out" />
<meta property="og:locale" content="en_US" />
<meta property="og:image" content="https://orbit-loona.github.io/bin/bad-image-image.png" />
<meta property="og:image:width" content="196" />
<meta property="og:image:height" content="149" />
<meta property="og:image:alt" content="image" />
<meta name="twitter:image:src" content="https://orbit-loona.github.io/bin/bad-image-image.png" />
<meta name="twitter:title" content="<img> generator" />
<meta name="twitter:description" content="URLs go in, HTML <img/>s come out" />
<link rel="stylesheet" href="main.css"/>
<meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="An Orbit">
<meta charset="UTF-8">
<style>
li img { vertical-align: top; }
#links { width: 450px; height: 120px; font-size: 80%; }
</style>
<script>
/*urls = [
"https://cdn.discordapp.com/attachments/482759696390946837/1093206560261558393/image.png",
"https://cdn.discordapp.com/attachments/1029742533988855858/1093205936585326592/180908_9.jpg",
"https://cdn.discordapp.com/attachments/1029742533988855858/1093195401928114256/220622_7-2.jpg",
"https://cdn.discordapp.com/attachments/1029742533988855858/1093195368809889963/FMDG07jVkAEp9st.jpg",
"https://cdn.discordapp.com/attachments/1029742533988855858/1093206266505068746/EpGSWj7XUAAW2Id_1.jpg",
"https://cdn.discordapp.com/attachments/482759670637789205/1093283421410832394/Ff1Tn0-UUAAbQzK.jpg",
"https://cdn.discordapp.com/attachments/482759670637789205/1093283584586027139/370f403506430dcf570f1f4bcc975b9a.png"
];*/
function getURLs() {
linkBox = document.getElementById("links");
linkList = linkBox.value;
linkList = linkList.trim();
linkList = linkList.split(/[\r\n]+/g);
linkList = linkList.map(x => x.trim());
return linkList;
};
function generateImages() {
var imageList = document.getElementById("imageList");
var urls = getURLs();
if(urls.length == 0) {
return false;
};
imageList.textContent = ""; //clear list
for(var i = 0; i < urls.length; i++) {
var newLi = document.createElement("li");
var newImg = document.createElement("img");
newImg.setAttribute("src",urls[i]);
newLi.appendChild(newImg);
imageList.appendChild(newLi);
};
return true;
};
</script>
</head>
<body>
<h1>Dumbly generating <img>s from urls</h1>
<p>(Now with ordered list)</p>
<textarea id="links" placeholder="Separated by newlines, enter the URLs to the images"></textarea><br/>
<button onclick="generateImages()">Load images into HTML</button>
<div>
<ol id="imageList"></ol>
</div><br/>
<br/><br/><a href="index.html"><small>go to main page</small></a>
</body>
</html>