正文

轻松学会JS提取图片：掌握5招快速获取网页图片方法

/0 浏览量
0401

在这个数字化时代，网页上的图片无处不在。有时候，我们可能需要从网页中提取图片，用于个人或商业用途。JavaScript（简称JS）作为一种强大的前端脚本语言，为我们提供了多种方法来提取网页图片。下面，我将为你详细介绍五种快速获取网页图片的方法。

方法一：使用document.images属性

document.images是一个HTML集合，包含了页面中所有的<img>元素。你可以通过遍历这个集合来访问每个图片的属性。

// 获取页面中所有的图片
var images = document.images;

// 遍历图片集合
for (var i = 0; i < images.length; i++) {
  // 获取图片的src属性
  var imgSrc = images[i].src;
  
  // 处理图片，例如保存到本地
  console.log(imgSrc);
}

方法二：使用querySelectorAll方法

querySelectorAll方法可以用来选择页面中所有匹配指定CSS选择器的元素。使用这种方法，你可以直接获取到所有的图片元素。

// 使用querySelectorAll获取所有图片
var images = document.querySelectorAll('img');

// 遍历图片集合
images.forEach(function(img) {
  // 获取图片的src属性
  var imgSrc = img.src;
  
  // 处理图片，例如保存到本地
  console.log(imgSrc);
});

方法三：使用getElementsByClassName方法

如果你知道图片具有特定的类名，可以使用getElementsByClassName方法来获取这些图片。

// 使用getElementsByClassName获取具有特定类名的图片
var images = document.getElementsByClassName('my-image-class');

// 遍历图片集合
for (var i = 0; i < images.length; i++) {
  // 获取图片的src属性
  var imgSrc = images[i].src;
  
  // 处理图片，例如保存到本地
  console.log(imgSrc);
}

方法四：使用getElementsByTagName方法

getElementsByTagName方法可以用来获取页面中所有指定标签名的元素。对于图片，你可以使用img标签名来获取。

// 使用getElementsByTagName获取所有图片
var images = document.getElementsByTagName('img');

// 遍历图片集合
for (var i = 0; i < images.length; i++) {
  // 获取图片的src属性
  var imgSrc = images[i].src;
  
  // 处理图片，例如保存到本地
  console.log(imgSrc);
}

方法五：使用fetch和URL.createObjectURL方法

如果你想直接获取图片的原始数据，可以使用fetch方法和URL.createObjectURL方法。

// 使用fetch获取图片数据
fetch('https://example.com/image.jpg')
  .then(function(response) {
    return response.blob();
  })
  .then(function(blob) {
    // 创建一个指向该Blob的URL
    var imageUrl = URL.createObjectURL(blob);
    
    // 处理图片，例如显示在页面上
    console.log(imageUrl);
  });

通过以上五种方法，你可以轻松地从网页中提取图片。当然，在实际应用中，你可能需要根据具体情况选择合适的方法。希望这篇文章能帮助你更好地掌握JavaScript在提取网页图片方面的应用。

-- 展开阅读全文 --