Using Bookmarklet to save images on current page to Remote Server

Question

I have created a bookmarklet that extracts all images from a page when clicked.

var imgs = $('img');
for(var i=0; i < imgs.length; i++) {
    console.log(imgs[i].src);
}

The next time will be to save these images to the server so that the user can access these images on my website.

After digging through the scripts used by pinterest etc, they seem to use an iframe, but I cant figure out what the iframe is for, as its an empty HTML doc. How can the iframe, or anything else, be used to submit images from the current website to my web site?

Answer 1

This requires cooperation from the other website to insert your <iframe> securely with JavaScript (a lot of websites like Facebook do this). Take a look at this answer: How does the Facebook Like button work?

You can create a cross-domain request using JSONP. I would just post the image sources to your site. Then, your site can download the images (as opposed to downloading the images from the html itself).

Answer 2

You can't submit the binary image files through a bookmarklet. You can only submit an HTTP GET or POST which contains the URLs of those images to your server and your server fetches the images itself. One way to do a cross-domain post is to submit a form . A blank iframe can be used at the target for a form so what when you submit that form the current page location does not change.

Example:

<iframe style="display:none" name="myHiddenIframe"></iframe>
<form action="http://savepicturesite.abc/transload.php" target="myHiddenIframe" method="post">
  <input type="hidden" name="pic1" value="http://domain.com/pic.jpg">
</form>