Как вытащить изображения из DOM в JavaScript?

Question

Если вы посмотрели на Pinterest, то узнаете, что у него есть букмарклет, на который пользователь может нажать, и он загружает больше javascript, который собирает определенные изображения из DOM и позволяет им закрепить их на сайте. Мне показалось интересным собирать изображения, и я хотел бы иметь возможность это сделать. Где бы я мог найти, чтобы узнать, как собирать изображения из DOM, чтобы я мог позволить пользователю что-то делать с ними? Я выполнил поиск в Google, но большинство из них касаются использования php, и это не работает, например, если пользователь находится на странице, требующей входа в систему.

Answer 1

Я не совсем уверен, что вы спрашиваете, но вот как вы получаете изображение с помощью javascript:

var images = document.getElementsByTagName("img");

Это вернет нодлист, который вы можете циклически просматривать для работы с одним изображением за раз

for (var i=0,l=images.length;i<l;i++){
   // your code here
   console.log(images[i].src);
}

Answer 2

Создать букмарклет .Чтобы получить все изображения на странице, сделайте что-то вроде этого:

var images = document.getElementsByTagName('img');
for (var i = 0; i < images.length; i++) {
    var imageSrc = images[i].src;
    // Do something with the image
    // ie, add it to the DOM and let them select one.
    // It also might be worth looking at the offsetWidth property to only grab larger images
}

Вот источник в букмарклет Pinterest для справки

Answer 3

на самом деле довольно просто, используя jquery http://jquery.com/

, вы можете сделать простой селектор типа $('img') .., который даст вам коллекцию всех изображений на странице ... с этогоможно получить источник любого из них, используя $('img').first().attr('src') <===. Это вернет источник первого изображения на странице </p>

надеюсь, это поможет