title: bookmarklet to get full path to an image
body: <p>I'm working on a bookmarklet that gives the full path to an image when you click on any image on a web page. The image is then downloaded on our servers, and we do business stuff to it.</p>
  
  <p>Currently, the script parses out the <code>src</code> attribute using jQuery, then has some dumb logic that usually works, but quite often it does not.</p>
  
  <p>Now, I could keep writing ugly code to do a better job of parsing out the url using regex and stuff, but I feel like there should be some better way of doing this.. Finding some way to mimic (as in firefox) "Right-Click => Copy Image Location" would be fantastic.</p>
  
  <p>Here is the relevant js code I have currently (buggy, but it usually works).. Any innovative ideas on how to better accomplish this?</p>
  
  <pre><code>var imgsrc;
  $("img").click(function() {
    imgsrc = $(this).attr("src");
    var url = document.URL;
  
    if (window.location.pathname != "/") {
      var pathLoc = url.indexOf(window.location.pathname);
      url = url.substr(0, pathLoc + 1);
    } else if (window.location.pathname.substr(0,1) == "/") {
      url = url.substr(0, url.length - 1);
    }
  
    if (imgsrc.toLowerCase().indexOf("http://") != 0) {
      imgsrc = url + imgsrc;
    }
  
    window.open("http://www.mycompany.com/whatever?imgsrc=" + imgsrc + "");
  });
  
  $("img").hover(function () {
    $(this).css({'border' : '4px solid #ff0000'});
    }, function () {$(this).css({'border' : ''});
  });
  </code></pre>