Использование Bookmarklet для сохранения изображений на текущей странице на удаленном сервере

Question

Я создал букмарклет, который при нажатии извлекает все изображения со страницы.

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

В следующий раз я буду сохранять эти изображения на сервере, чтобы пользователь мог получить доступ к этим изображениям на моем веб-сайте.

После просмотра скриптов, используемых pinterest и т. Д., Они, похоже, используют iframe, но я не могу понять, для чего предназначен iframe, так как это пустой HTML-документ. Как можно использовать iframe или что-то еще для отправки изображений с текущего веб-сайта на мой веб-сайт?

Answer 1

Это требует сотрудничества с другого сайта, чтобы вставить ваш <iframe> безопасно с JavaScript (многие сайты, такие как Facebook, делают это). Посмотрите на этот ответ: как работает кнопка "Нравится" на Facebook?

Вы можете создать междоменный запрос, используя JSONP. Я бы просто опубликовал источники изображений на вашем сайте. Затем ваш сайт может загружать изображения (в отличие от загрузки изображений из самого html).

Answer 2

Вы не можете отправить двоичные файлы изображений через букмарклет. Вы можете отправлять только HTTP GET или POST, который содержит URL-адреса этих изображений, на ваш сервер, и ваш сервер сам выбирает изображения. Один из способов сделать междоменное сообщение - это отправить 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>