Skip to content

Instantly share code, notes, and snippets.

@STRML
Last active March 22, 2024 22:58
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save STRML/bc6f400033207f503dce16ffedf06ea9 to your computer and use it in GitHub Desktop.
Save STRML/bc6f400033207f503dce16ffedf06ea9 to your computer and use it in GitHub Desktop.
A simple script for downloading all images for a listing on BringATrailer.com
async function ensureCarouselVisible() {
const imgWrap = document.elementFromPoint(100, 100);
if (!imgWrap.classList.contains('pswp__item')) {
// carousel isn't active, make it so
document.querySelector('.gallery img').click();
while (!document.elementFromPoint(100, 100).classList.contains('pswp__item')) {
await delay(50);
}
}
}
function delay(ms) {
return new Promise((resolve) => setTimeout(resolve, ms));
}
// Find the active image, surround it in an anchor tag, then click it.
async function downloadImage() {
const imgWrap = document.elementFromPoint(100, 100);
const img = imgWrap.querySelector('.pswp__img');
if (!img || !img.src) {
throw new Error("All images downloaded or next image not found.");
}
// Full image hasn't loaded yet, so change the src
const src = img.src
.split('?')[0] // get rid of querystring
.replace('-scaled', ''); // Remove `-scaled` to attempt to get the full res image
return downloadSrc(src);
}
// Create an anchor then download from it
function downloadSrc(src) {
const a = document.createElement('a');
a.href = src;
a.download = "";
a.click();
}
function nextImage() {
document.querySelector('.pswp__button.pswp__button--arrow--right').click();
}
function getCounterValue() {
const [position, total] = document.querySelector('.pswp__counter').textContent.split('/');
return parseInt(position.trim(), 10);
}
async function run() {
await ensureCarouselVisible();
await delay(500);
const firstValue = getCounterValue();
async function preloadLoop() {
nextImage();
await delay(50);
if (getCounterValue() !== firstValue) return preloadLoop(); // recurse
}
async function imageLoop() {
try {
await downloadImage();
} catch (e) {
console.log('done!');
return;
}
nextImage();
await delay(100);
// console.log('counter', getCounterValue());
if (getCounterValue() !== firstValue) return imageLoop(); // recurse
}
console.log('Running image preload, please wait...');
await preloadLoop();
console.log('Running download...');
return imageLoop();
}
run()
.then(() =>
console.log('Download initiated, please wait until your download folder contains the full number of items.'))
.catch(console.error);
@maplecoffee
Copy link

Thanks for creating this, it works perfectly.

@handro123
Copy link

Sorry do you have steps on how to run this? I'm trying in the Chrome Dev Tools Console but getting an error:

TypeError: Cannot read properties of null (reading 'click')
    at ensureCarouselVisible (<anonymous>:5:53)
    at run (<anonymous>:2:9)
    at <anonymous>:1:1

@STRML
Copy link
Author

STRML commented Jun 25, 2023

@handro123 I've updated it, try it now.

@handro123
Copy link

@STRML Thanks for the quick response. It seems to work better now but doesn't download all images.

Using Win 11 and Chrome I tried in an Incognito tab to make sure my extensions weren't causing any issues. I also make sure to expand the album in the listing when it says +NNN

On this listing it stops at picture 210 in the slideshow and the script give the popup that its Done, but it only downloaded 116 pictures:
https://bringatrailer.com/listing/2006-ford-gt-heritage-edition-24/

On this listing it stops at 28 in the slideshow but only downloaded 19 pictures.
https://bringatrailer.com/listing/1979-bmw-320i-23/

On Firefox it downloads them all but as .webp files.

Thanks again for the help and script!

@STRML
Copy link
Author

STRML commented Jun 26, 2023

Re: Firefox that's expected. webp is a perfectly legitimate file format and you can convert (or not). if you want to fix that, please propose a patch, but I'm not concerned about it.

I've updated the script with a version that's a little bit slower but it does so in order to be sure it gets them all. I counted 155 on the bmw listing.

@handro123
Copy link

Thanks again for your help and sorry I'm a bit of a JS nubie but figuring it out as I go.

One new issue I am having is .replace('-scaled', '');. Some pictures in the BMW listing have -scaled in the middle of the filename and those weren't getting downloaded as the URL would 404. Example:
https://bringatrailer.com/wp-content/uploads/2023/05/1979_bmw_320i_Doc-May-18-2023-2-50-PM-p3-36336-scaled-1-84154.jpg?fit=1587%2C2048
would get turned into:
https://bringatrailer.com/wp-content/uploads/2023/05/1979_bmw_320i_Doc-May-18-2023-2-50-PM-p3-36336-1-84154.jpg

Replacing it with .replace('-scaled.', '.'); would make sure it's only replaced at the end of the filename.

Another issue I had in Chrome and Edge was while the counter would hit 155, it wouldn't actually download the last image and it ended the slideshow there. Trying to manually download it with downloadImage() would trigger the "Error: All images downloaded or next image not found." message. Also counter stops at 155 and doesn't roll back over to 1.

On Firefox it downloads the last image successfully and the slideshow returns to the first image, with counter = 1

Not really important as I can manually download the last one, but thanks again for your quick help. Way easier than doing this manually.

Also still having issues in Chrome stopping around picture 138 for that specific listing but since the script works fine in Firefox / Edge this is probably something on my side.

@CuHead
Copy link

CuHead commented Jan 2, 2024

Thank you all for this super-handy utility! Works like a charm.

For users who found this code snippet browsing the internet, the usage of this code as follows.

  1. Open browser (I used Mozilla Firefox)
  2. Click 3 lines in upper right
  3. Select "More Tools" and then "Web Developer Tools".
  4. You may have to enter the text "accept paste" in the console on the left side and click Run.
  5. Paste the javascript code from above into the console.
  6. Click Run

It will open a browser tab for each picture and download the picture to your download folder.

Voila!

Thanks again.

@Z-Karma
Copy link

Z-Karma commented Jan 24, 2024

@CuHead Thank you for the step-by-step.
@STRML This is an awesome tool for using BAT images as reference images for documentation. Thank You for the work you put into it and also making it available to the public.

I also learned that with this Firefox plugin enabled:
https://addons.mozilla.org/en-US/firefox/addon/dont-accept-webp/
The images downloaded are in .jpg format instead of webp.

I tried this after already loading the webp plugin into irfanview, thinking i was just going to run a batch convert.

@ymatushe
Copy link

ymatushe commented Mar 5, 2024

Had same issues with the script as @handro123 - did not download all pictures.
Tried in MSFT Edge - worked great, all pictures downloaded as .jpeg
Thanks!

@aronparsons
Copy link

Worked like a charm in Chrome. Thanks! Made archiving the photos from a purchase easy.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment