Monday, June 27, 2011

Get Images Bookmarklet

I wonder why all Internet browsers do not provide us with a built-in and simple way to download multiple images, such as those excellent photos from my favorite Boston.com's The Big Picture. The closest thing that fit my need is Bulk Image Downloader and Firefox Extensions (Image Picker). The thing is, I certainly don't want to pay for something that can be free, and secondly, I don't use Firefox as my primary Internet browser (Hail Opera!)

My first plan was to make an Opera extension similar to Firefox's Image Picker, which basically read a page, select the images and then call the built-in download manager to save it to local folder. However, I'm having a real hard time finding the Opera API function to call the Opera download manager to download even a single url. So, I end up writing just this simple bookmarklet to grab the images url, and execute Free Download Manager to perform the download. For now, the bookmarklet only extract direct source url of images on the page, not linked images (such as google image search, flickr, etc.)

UPDATE: It now extracts the real image url of Google Image Search and Yahoo Image Search results :)

UPDATE 2: For Opera User, the bookmarklet will extract the url in links, so you can use the Link Panel, Select All, and Save to Download Folder. No longer need to copy paste to Free Download Manager.

You can add this link to your bookmark folder or drag it to your Opera Bookmark Bar
Get Images Bookmarklet

UPDATE 3: Added Check / Uncheck All Buttons Get Images Bookmarklet v3

UPDATE 4: Add Bing image search support Get Images Bookmarklet v4

Google Chrome or Firefox version of the bookmarklet: Get Images

Here is how you use it:

1. Go to your favorite image gallery site. Here are some of my favorites:



2. Click the Get Images Bookmarklet from your bookmark folder or Bookmark Bar, it will open a new page with all the images from the site resized along with a checkbox next to each images

3. Check or uncheck the images you want to download, and the image source url will be copied to the textarea.

4. Select all (Ctrl + A) and Copy (Ctrl + C) the links in the textbox

5. Open Free Download Manager, choose Import list of URLs from clipboard (Ctrl + Shift + V)

Comments are greatly appreciated :)

19 comments:

  1. Hi,
    I am learning how to make bookmarklets that could save images from the internet. Would you be so kind to share your code for this bookmarklet with me? My email is mjray369@gmail.com
    Thank you so much!

    ReplyDelete
  2. From what I know, we can't use javascript to directly save an image to our local drive. In my example, I use Opera Link to perform the save, or Free Download Manager. You can check out the bookmarklet code by right-clicking the link, and choose copy link address. Let me know if you need more help :)

    ReplyDelete
  3. Hi,I looked through your code. This part I don't really understand. Can you elaborate a bit more?

    imgURL=document.images[i].src;
    if(document.images[i].parentNode.tagName == 'A')
    { refImg=decodeURIComponent(document.images[i].parentNode.href);
    if(refImg.indexOf("imgurl")>0)
    imgURL=refImg;
    }

    Thanks in advance!

    ReplyDelete
    Replies
    1. Anonymous1:39 AM

      Can you please give me that full code in my email id ashfaquekhan6@gmail.com

      Delete
  4. // Get the image source URL
    imgURL=document.images[i].src;

    // Check if the image is a link (e.g.: Google Image Search results)
    if(document.images[i].parentNode.tagName == 'A')
    {
    // Decode URI (decode html codes to regular string) of the link
    refImg=decodeURIComponent(document.images[i].parentNode.href);
    // If there is "imgurl", then get the linked image url instead of the original image source
    if(refImg.indexOf("imgurl")>0)
    imgURL=refImg;
    }

    ReplyDelete
  5. nice info, blogwalking sir. Please visit my blog http://linkpanel.blogspot.com

    ReplyDelete
  6. Mas bro, bagus banget addon nya. kalo boleh usul, bisa gak dikasih tombol select all, jadi gak perlu centang satu-satu, capek juga euy kalo banyak. ditunggu updatenya ya...
    trims

    ReplyDelete
    Replies
    1. Rika, tombol Check All / Uncheck All sudah aku tambahin, Enjoy :)

      Delete
    2. Makasih ya..., maknyoss tenan.... :D
      Oia aku dah coba untuk SE Bing gak bisa ya, soallnya dia bukanya cuman link thumnail doank. Tapi overall cucok... :D

      Delete
    3. Sudah bisa untuk Bing :D Enjoy :)

      Delete
    4. Wow....
      ....Kawai....
      Makasih buanyak ya... :)
      Maaf juga jadi merepotkan.. :)

      Delete
  7. @Rika, thank you sudah nyobain :) Ok, nanti aku akan tambahin Select/Deselect All biar lebih cepet

    ReplyDelete
  8. Mas bro, dah lama nih gak berkunjung lagi. Udah adakah update yang ada select all nya... :)
    kalo ada email di nukotak[at]gmail[.]com dunk.
    trims ya...

    ReplyDelete
  9. opera mini gmana om nyimpen bukmarkltnya?

    ReplyDelete
    Replies
    1. Belum pernah nyoba kalo opera mini, kalo layarnya kecil banget susah kali ya pake bookmarklet ini

      Delete
  10. Drobb4:14 AM

    nice bookmarklet, but is there a way to get full sized images from a site like say 4walled.org? so far all ive been able to pull up is the thumbnails. thanks for this tho it is handy for alot of other sites.

    ReplyDelete
    Replies
    1. I've checked the site, getting the full size image url is fairly simple. The thumbnails url start with 4walled.org/thumb/... and the full size starts with 4walled.org/src/...

      Delete
  11. Anonymous5:21 PM

    HI,
    first of all i wanna thank you for this GREAT Bookmarklet!
    Second: can you do a V5 with all images selected by default ? (without pressing buttons)

    Thanks again and have a nice day!

    ReplyDelete
  12. Anonymous10:50 AM

    Pagi mas, lama gak main kesini.
    Mas Image bookmarklet tolong di update untuk FB juga mas :)
    Sori kebanyakan minta,tapi punya anda yang bagus menurutkan,
    Trims
    Rika

    ReplyDelete