Question

我创建了一个书签，可以在点击时从页面中提取所有图像。

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

下次将这些图像保存到服务器，以便用户可以在我的网站上访问这些图像。

在深入研究pinterest等使用的脚本后，他们似乎使用了iframe，但我无法弄清楚iframe的用途，因为它是一个空的HTML文档。如何使用iframe或其他任何方式将图像从当前网站提交到我的网站？

Answer 1

这需要来自其他网站的合作，以安全地使用JavaScript插入您的<iframe>（像Facebook这样的很多网站都这样做）。看一下这个答案：How does the Facebook Like button work?

您可以使用JSONP创建跨域请求。我只想将图像源发布到您的网站。然后，您的网站可以下载图像（而不是从html本身下载图像）。

Answer 2

您无法通过书签提交二进制图像文件。您只能向服务器提交包含这些图像的URL的HTTP GET或POST，并且您的服务器会自动获取图像。进行跨域帖子的一种方法是提交form。 iframe可以在target使用空白form，因此当您提交该表单时，当前页面位置不会发生变化。

示例：

<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>

使用Bookmarklet将当前页面上的图像保存到远程服务器

2 个答案: