Skip to content

Instantly share code, notes, and snippets.

@MadMikeyB

MadMikeyB/index.html

Last active June 30, 2023 09:39
Show Gist options
  • Save MadMikeyB/3f87a94fb84aa05617770932d0319733 to your computer and use it in GitHub Desktop.
Save MadMikeyB/3f87a94fb84aa05617770932d0319733 to your computer and use it in GitHub Desktop.
Download ZIP
4chan /wg/ just the wallpapers
Raw
index.html
<!doctype html>
<html>
<head>
<title>4chan /wg/ just the wallpapers</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.4/css/bulma.min.css" integrity="sha512-HqxHUkJM0SYcbvxUw5P60SzdOTy/QVwA1JJrvaXJv4q7lmbDZCmZaqz01UPOaQveoxfYRv1tHozWGPMcuTBuvQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body class="has-navbar-fixed-top">
<nav class="navbar is-fixed-top">
<div class="navbar-brand">
<a class="navbar-item" href="https://bulma.io">
ImgGrab
</a>
</div>
<div class="navbar-menu">
<div class="navbar-start">
<nav class="pagination is-small" role="navigation" aria-label="pagination">
<ul class="pagination-list">
<li>
<a href="?page=1" data-page="1" class="pagination-link" aria-label="Page 1" aria-current="page">1</a>
</li>
<li>
<a href="?page=2" data-page="2" class="pagination-link" aria-label="Goto page 2">2</a>
</li>
<li>
<a href="?page=3" data-page="3" class="pagination-link" aria-label="Goto page 3">3</a>
</li>
<li>
<a href="?page=4" data-page="4" class="pagination-link" aria-label="Goto page 4">4</a>
</li>
<li>
<a href="?page=5" data-page="5" class="pagination-link" aria-label="Goto page 5">5</a>
</li>
<li>
<a href="?page=6" data-page="6" class="pagination-link" aria-label="Goto page 6">6</a>
</li>
<li>
<a href="?page=7" data-page="7" class="pagination-link" aria-label="Goto page 7">7</a>
</li>
<li>
<a href="?page=8" data-page="8" class="pagination-link" aria-label="Goto page 8">8</a>
</li>
<li>
<a href="?page=9" data-page="9" class="pagination-link" aria-label="Goto page 9">9</a>
</li>
<li>
<a href="?page=10" data-page="10" class="pagination-link" aria-label="Goto page 10">10</a>
</li>
</ul>
</nav>
</div>
</div>
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<a class="button is-primary" data-download-button>
<strong>Download This Page</strong>
</a>
</div>
</div>
</div>
</nav>
<div class="container">
<div id="app" class="columns is-variable is-2 is-multiline"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.4.0/axios.min.js" integrity="sha512-uMtXmF28A2Ab/JJO2t/vYhlaa/3ahUOgj1Zf27M5rOo8/+fcTUVH0/E0ll68njmjrLqOBjXM3V9NiPFL5ywWPQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function(e) {
console.log('document has loaded.')
const urlParams = new URLSearchParams(window.location.search)
const page = urlParams.get('page') || 1
document.querySelector(`[data-page="${page}"]`).classList.add('is-current')
const apiUrl = `https://cors-anywhere.herokuapp.com/https://a.4cdn.org/wg/${page}.json`
const apiOptions = {
headers: {
'Access-Control-Allow-Origin' : '*',
'Access-Control-Allow-Methods':'GET,PUT,POST,DELETE,PATCH,OPTIONS'
}
}
const images = []
axios.get(apiUrl, apiOptions)
.then(({data}) => {
const threads = data.threads
threads.map((thread) => {
const posts = thread.posts
posts.map((post) => {
if (post.sticky != 1) {
if (post.tim != '1489266876258') {
if (post.tim) {
const image = {
'id': post.tim + post.ext,
'url': 'https://i.4cdn.org/wg/' + post.tim + post.ext
}
images.push(image)
}
}
}
})
})
}).then(() => {
// console.log(images)
images.map((image) => {
const wrapper = document.querySelector('#app')
const divEl = document.createElement('div')
const anchorEl = document.createElement('a')
const figureEl = document.createElement('figure')
const imgEl = document.createElement('img')
// <div>
divEl.classList.add('column')
divEl.classList.add('is-one-third')
// divEl.classList.add('card')
// <a>
anchorEl.href = image.url
anchorEl.download = image.id
anchorEl.target = '_blank'
// anchorEl.classList.add('card-image')
// <figure>
figureEl.classList.add('image')
figureEl.classList.add('is-16by9')
// <img>
imgEl.src = image.url
imgEl.alt = image.id
// imgEl.setAttribute('crossorigin', 'anonymous')
// go go gadget go
wrapper.appendChild(divEl)
divEl.appendChild(anchorEl)
anchorEl.appendChild(figureEl)
figureEl.appendChild(imgEl)
})
})
})
const downloadAll = async () => {
// Create and append a link
let link = document.createElement('a')
document.documentElement.append(link)
const images = document.querySelectorAll('img')
for (let i = 0; i < images.length; i++) {
const image = images[i]
await fetch(`https://cors-anywhere.herokuapp.com/${image.src}`, {
mode: "cors",
headers: {
'Access-Control-Allow-Origin' : '*',
'Access-Control-Allow-Methods':'GET,PUT,POST,DELETE,PATCH,OPTIONS'
}
})
.then(res => res.blob()) // Gets the response and returns it as a blob
.then(blob => {
let objectURL = URL.createObjectURL(blob)
// Set the download name and href
const imageName = image.getAttribute('alt')
link.setAttribute("download", imageName)
link.href = objectURL
// Auto click the link
link.click()
})
}
}
const downloadButton = document.querySelector('[data-download-button]')
downloadButton.addEventListener('click', downloadAll)
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment