
Show HN: Extract.pics – A tool to view and download images from websites - pabue
https://extract.pics
======
pabue
Extract.pics is a small side project and the result of a few inconveniences.
In the past months I have been working on the redesign of two news websites,
so I needed a lot of images while creating the cencepts/mockups. I encountered
a few problems, that I wanted to solve with this project:

\- I didn't want to download just a few images and reuse them everywhere. That
makes the design feel a lot less "real" and a lot less interesting. I'm also
to lazy to download lots of images manually.

\- Some of the images were set with background-image in CSS, what makes it
more tedious to find and actually download them.

Yes, all the images used on a site are visible in the browser dev-tools. But
you don't really have a preview or an easy way of finding the image you want.
And you still need to download them all individually.

It might be good to know that extract.pics executes javascript and scrolls
down for a few seconds before extracting all the images.

Hopefully this is useful for someone else out there.

------
jewel
Seems to work really well.

For those unaware, Firefox has a built-in way to do this which will work even
on sites where you need to be logged in.

If you right click on the page and choose "Page Info", there's a Media tab. It
can be sorted by the Size column. It includes video and audio files as well.

~~~
pabue
Thanks, nice to hear.

Wow, didn't know about this feature in firefox. I was thinking about adding
support for audio and video as well, but I'm not sure if there is really a
need for that.

------
stevenicr
I've been needing something to do this (easily) for more than a year.. nice to
see this tool make it simple and easy. I popped in a url and it quickly showed
75 pics, I clicked select all and download - then got nothing (after a quick
spin circle).

(using firefox, did disable ublock origin, still no download) -

Love getting the visual of the 75 pics with the basic details on size! Would
love some extra info with a click perhaps showing the url it came from.
(currently wondering if the 75 pics at 210x158 are just the thumbnails and I
actually need a scraper to traverse further to get the bigger size for the
next web site..

I've been considering some of the scraping tools out there.. but not sure I
want to spend the time learning something only to have it not work the way I
need.. see this particular site has a weird (hosting?) issue - where pics will
404 on some albums.. then if you go back and reload the page manually some
minutes later - they appear - then you can click to download..

So I really need something to show me urls of pics that were in the html code
but 404 - so I can go back and get them.

~~~
pabue
Thanks for the feedback!

I will look into the download issue. But i think it might be caused by the
actual size you want to extract the images from. Currently the whole download
may fail if one image fails to download.

Adding an option to show the actual source of the image, might be a good idea.
I will look into this.

About the 404 issue: Currently every image that fails to load in the browser
or is smaller than one pixel automatically gets removed. I will add an option
later to disable this behaviour.

------
city41
I'm impressed it seems to grabbed all of the images on a very JS heavy site
with a carousel I just tried it on. Nice work.

One tiny UX thing to consider, instead of validating the string is a url, just
try to load the site and if it fails, error then. I typed in a valid url
without the "[http://"](http://") part and the validation complained. You need
to handle the "wait this isn't a valid site" case anyway, might as well kill
two birds with one stone.

~~~
pabue
Thank you!

Nice catch. I just removed the url validation, so using urls without the
[http://](http://) part will work now.

------
sagunsh
How about creating an API that geenrates a list of image urls?

~~~
pabue
Interesting idea. Do you have an idea when this could be useful?

------
forgotmypw17
Does the download and extract happen on the client side?

~~~
pabue
No, the extraction is done with puppeteer and chromium on the server. When
someone downloads an image it's first downloaded to the server and then
returned to the client, since it's not possible to download something via
Javascript from another domain directly.

------
1cvmask
Thanks. When will video be on the way?

~~~
pabue
I might show videos in the near future. Not sure about the download yet since
this would consume a lot more bandwidth.

------
jokab
this looks great! tech stack pls

~~~
pabue
Thanks!

Frontend: Vue.js, Buefy and Tailwind.css

Backend/Api: Laravel

Scraper: Puppeteer with puppeteer-cluster to enable concurrency and using a
proxy to prevent getting blocked

------
Flavyo
Nice work! This is awesome.

~~~
pabue
Thank you!

------
maps7
Awesome, well done

~~~
pabue
Thanks!

