Công cụ Lấy Hình Ảnh: Cách Lấy Hàng Loạt Hình Ảnh Từ Các Trang Web

Tóm tắt:

• Thuộc tính src là nơi không đáng tin cậy nhất để tìm hình ảnh. Các trang hiện đại đặt URL thực ở srcset, data-src, hoặc chỉ đặt nó sau khi tải chậm — hãy đọc currentSrc và các thuộc tính dữ liệu, không chỉ src.
• Hình ảnh tải chậm không tồn tại cho đến khi bạn cuộn đến chúng. Tự động cuộn trang trước để trình tải đổi chỗ hình ảnh tạm thời bằng URL thực, sau đó thu thập.
• Giải quyết mọi URL ra tuyệt đối và giữ lại siêu dữ liệu. new URL(src, location.href) sửa các đường dẫn tương đối và tương đối theo giao thức; alt, naturalWidth và naturalHeight đáng để ghi lại cùng với URL.
• Tải xuống qua trang, không phải qua một khách hàng HTTP trần. Một fetch() cùng nguồn gốc bên trong phiên được hiển thị mang theo cookie và tham chiếu mà CDN mong đợi, vì vậy các hình ảnh bị bảo vệ hotlink trở lại thay vì một 403.
• Nó chạy trên một trình duyệt thực, đó là mục đích chính. Scrapeless Scraping Browser hiển thị JavaScript xây dựng phòng trưng bày và cung cấp lối ra dân cư, vì vậy các hình ảnh tải giống như cách mà một khách truy cập trải nghiệm.
• Miễn phí để bắt đầu. Tài khoản Scrapeless mới bao gồm thời gian chạy Scraping Browser miễn phí — đăng ký tại app.scrapeless.com.

Giới thiệu: tại sao "chỉ cần lấy các thẻ img" không hiệu quả

Cào hình ảnh có vẻ như chỉ là một câu lệnh đơn giản — chọn mọi <img>, đọc src, xong. Trên một trang thực, nó ngay lập tức rơi vào hỏng. Các phòng trưng bày tải chậm, vì vậy hầu hết hình ảnh có một hình ảnh tạm thời trong src và URL thực ở data-src cho đến khi bạn cuộn để chúng hiển thị. Hình ảnh phản hồi đặt nhiều ứng viên trong srcset và trình duyệt chọn một trong số đó khi thực thi. URL là tương đối hoặc tương đối theo giao thức. Và khi bạn có một URL, CDN thường từ chối tải HTTP trần vì nó mong đợi cookie và tham chiếu của một lượt xem trang thực.

Vì vậy, một công cụ cào hình ảnh đáng tin cậy thực sự gồm bốn bước: hiển thị trang trong một trình duyệt thực, cuộn để buộc hình ảnh tải chậm phải tải, đọc URL hình ảnh đã được giải quyết (không phải thuộc tính thô) cộng với siêu dữ liệu của nó, và tải xuống dữ liệu thông qua phiên đã hiển thị.

Hướng dẫn này thực hiện cả bốn bước trên Scrapeless Scraping Browser — một trình duyệt đám mây chống phát hiện được kết nối với Puppeteer — và mọi đoạn mã bên dưới đều được chạy trên một trang có nhiều hình ảnh sống. Chỉ hình ảnh công khai.

Bạn có thể làm gì với nó

• Thu thập hàng loạt mọi hình ảnh trên một trang với URL đã được giải quyết, văn bản thay thế và kích thước.
• Xử lý các phòng trưng bày tải chậm và cuộn vô hạn bằng cách cuộn trước khi bạn thu thập.
• Lấy hình ảnh phản hồi bằng cách đọc currentSrc (ứng viên mà trình duyệt thực sự chọn).
• Tải xuống hàng loạt qua trang để các CDN được bảo vệ hotlink phục vụ file.
• Lọc theo kích thước sử dụng kích thước tự nhiên để bỏ qua biểu tượng, các khoảng trống và pixel theo dõi.

Tại sao Scrapeless Scraping Browser

Scrapeless Scraping Browser là một trình duyệt đám mây có thể tùy chỉnh, chống phát hiện được thiết kế cho các trình thu thập thông tin và đại lý AI. Đối với việc cào hình ảnh cụ thể, nó mang lại:

• Chromium tự phát triển — hiển thị JS xây dựng các phòng trưng bày và kích hoạt trình tải chậm, vì vậy các URL thực hiện hiện ra.
• Chống phát hiện bằng cách nhận dạng dấu vết — phiên làm cho nó giống như một trình duyệt thực, vì vậy các trang nhiều hình ảnh và các CDN của chúng phục vụ theo cách bình thường.
• Proxy dân cư tại hơn 195 quốc gia — lối ra từ một IP mà trang và CDN hình ảnh của nó tin tưởng.
• Giữ phiên làm việc — giữ cookie ấm để tải xuống trong trang mang theo thông tin xác thực đúng.
• Kết nối Puppeteer chuẩn — Puppeteer.connect() trả về một Browser bình thường; mã thu thập của bạn là Puppeteer đơn giản.

Nhận khóa API của bạn trên gói miễn phí tại app.scrapeless.com.

Điều kiện tiên quyết

• Node.js 18 hoặc mới hơn
• Tài khoản Scrapeless và khóa API — đăng ký tại app.scrapeless.com
• Làm quen với Puppeteer ở mức cơ bản

Cài đặt

npm install @scrapeless-ai/sdk puppeteer-core

export SCRAPELESS_API_KEY="your_api_token_here"

Bước 1 — Kết nối và tải trang

import { Puppeteer } from '@scrapeless-ai/sdk';

const browser = await Puppeteer.connect({
  apiKey: process.env.SCRAPELESS_API_KEY,
  sessionName: 'image-scraper',
  proxyCountry: 'US',
  sessionTTL: 300,
});

const page = await browser.newPage();
await page.goto('https://books.toscrape.com/', {
  waitUntil: 'networkidle2',
  timeout: 60000,
});

networkidle2 chờ cho đến khi các yêu cầu hình ảnh ban đầu ổn định, vì vậy các hình ảnh trên trên cùng là đã có trong DOM.

Bước 2 — Cuộn để kích hoạt hình ảnh tải chậm

Các hình ảnh bên dưới có thể vẫn là hình ảnh tạm thời cho đến khi chúng cuộn vào tầm nhìn. Đi bộ xuống trang từng bước, dừng lại để trình tải có thể đổi hình ảnh tạm thời thành URL thực:

await page.evaluate(async () => {
  for (let y = 0; y < document.body.scrollHeight; y += 600) {
    window.scrollBy(0, 600);

Chờ một Promise mới ((r) => setTimeout(r, 300));
}
});

Đối với các bộ sưu tập ảnh cuộn vô hạn, lặp lại điều này cho đến khi `document.body.scrollHeight` ngừng tăng — đó là dấu hiệu không còn hình ảnh nào để tải.

> Nhận khóa API của bạn trên gói miễn phí: [app.scrapeless.com](https://app.scrapeless.com/passport/login/?utm_source=website&utm_medium=blog&utm_campaign=scrapingbrowser&utm_term=image-scraper)

---

## Bước 3 — Thu thập URL đã giải quyết và siêu dữ liệu

Đọc URL mà trình duyệt thực sự giải quyết, quay lại qua các thuộc tính lazy-load thông thường, và làm cho mỗi URL trở thành tuyệt đối:

```javascript
const images = await page.evaluate(() => {
  const abs = (u) => { try { return new URL(u, location.href).href; } catch { return null; } };
  return [...document.querySelectorAll('img')]
    .map((img) => {
      const src =
        img.currentSrc ||           // ứng cử viên mà trình duyệt chọn (xử lý srcset)
        img.src ||
        img.getAttribute('data-src') ||
        img.getAttribute('data-lazy-src');
      return {
        src: abs(src),
        alt: img.alt || null,
        width: img.naturalWidth,
        height: img.naturalHeight,
      };
    })
    .filter((i) => i.src);
});

console.log(images.length, 'hình ảnh');
console.log(images[0]);
// 20 hình ảnh
// {
//   src: 'https://books.toscrape.com/media/cache/2c/da/2cdad67c44b002e7ead0cc35693c0e8b.jpg',
//   alt: 'Một ánh sáng trên gác mái',
//   width: 125,
//   height: 155
// }

currentSrc là chìa khóa: đối với một hình ảnh srcset phản hồi, nó cung cấp cho bạn ứng cử viên mà trình duyệt đã chọn ở viewport hiện tại, không phải đoán. Việc ghi lại naturalWidth/naturalHeight cho phép bạn bỏ qua các biểu tượng và khoảng trống sau này với bộ lọc kích thước đơn giản.

Bước 4 — Tải xuống hình ảnh qua trang

Tải xuống qua một client HTTP trống là nơi mà bảo vệ hotlink gây khó khăn — CDN không thấy referer hoặc cookie và trả về 403. Thay vào đó, lấy từng hình ảnh bên trong ngữ cảnh trang, vì vậy nó mang theo thông tin chứng thực của phiên, và giải mã base64 cục bộ:

import { writeFileSync } from 'node:fs';

const url = images[0].src;
const out = await page.evaluate(async (u) => {
  const res = await fetch(u);
  const bytes = new Uint8Array(await res.arrayBuffer());
  let binary = '';
  for (let i = 0; i < bytes.length; i++) binary += String.fromCharCode(bytes[i]);
  return { status: res.status, type: res.headers.get('content-type'), b64: btoa(binary) };
}, url);

writeFileSync('./image-0.jpg', Buffer.from(out.b64, 'base64'));
console.log({ status: out.status, type: out.type, bytes: Buffer.from(out.b64, 'base64').length });
// { status: 200, type: 'image/jpeg', bytes: 9876 }

Lặp lại điều này cho các hình ảnh đã thu thập của bạn để tải xuống theo lô, giữ một khoảng thời gian nhỏ giữa các yêu cầu và độ đồng thời vừa phải để CDN vẫn hài lòng.

Những gì bạn nhận được

Mỗi hình ảnh được thu thập là một bản ghi phẳng — URL đã giải quyết cộng với siêu dữ liệu:

[
  {
    "src": "https://books.toscrape.com/media/cache/2c/da/2cdad67c44b002e7ead0cc35693c0e8b.jpg",
    "alt": "Một ánh sáng trên gác mái",
    "width": 125,
    "height": 155
  }
]
// Ghi lại thực từ books.toscrape.com (20 hình ảnh trên trang chính). Giá trị thay đổi khi trang thay đổi.

Một vài quan sát chân thực:

• Kích thước nhỏ thường không phải là nội dung. Lọc bỏ bất cứ thứ gì dưới một ngưỡng (chẳng hạn 50×50) để bỏ qua các biểu tượng, sprite và pixel theo dõi.
• srcset có nghĩa là nhiều độ phân giải tồn tại. currentSrc cho bạn hình ảnh phù hợp với viewport; phân tích srcset thô nếu bạn muốn có hình ảnh lớn nhất.
• Hình ảnh nền không phải là thẻ <img>. URL của CSS background-image nằm trong các kiểu được tính toán - hãy thu thập chúng riêng nếu bộ sưu tập sử dụng chúng.
• Tải xuống qua trang cho bất cứ CDN nào kiểm tra referer; một yêu cầu đơn giản sẽ bị từ chối 403.

Kết luận: một công cụ thu thập hình ảnh bộ tin cậy

Một công cụ thu thập hình ảnh đáng tin cậy là render → cuộn → đọc URL đã giải quyết → tải xuống qua trang. Bỏ qua cuộn và bạn sẽ bỏ lỡ các hình ảnh trễ; đọc raw src thay vì currentSrc và bạn sẽ nhận được các hình ảnh dự phòng; tải xuống với một client trống và các CDN bảo vệ hotlink từ chối bạn. Chạy trên Scrapeless Scraping Browser cung cấp trình duyệt thực và truy cập cư dân mà khiến bộ sưu tập tải lên ngay từ đầu. Để thu thập URL trang thay vì hình ảnh, xem hướng dẫn Etsy scraper; trang sản phẩm Scraping Browser và tài liệu bao gồm toàn bộ bề mặt SDK. Cuộn trước, đọc currentSrc, giữ lại siêu dữ liệu, và lấy byte qua phiên.

Sẵn sàng xây dựng quy trình thu thập dữ liệu được hỗ trợ AI của bạn?

Tham gia cộng đồng của chúng tôi để yêu cầu một kế hoạch miễn phí và kết nối với các nhà phát triển xây dựng quy trình hình ảnh và truyền thông: Discord · Telegram.

Đăng ký tại app.scrapeless.com để nhận thời gian chạy Trình duyệt thu thập dữ liệu miễn phí và điều chỉnh các mẫu ở trên cho các bộ sưu tập và CDN mà quy trình làm việc của bạn cần. Xem bảng giá để biết quy mô.

Câu hỏi thường gặp

H: Việc thu thập hình ảnh từ một trang web có hợp pháp không?
Việc thu thập hình ảnh công khai thường là hợp pháp, nhưng quyền tác giả và Điều khoản Dịch vụ của trang web vẫn áp dụng cho cách bạn sử dụng chúng. Chỉ thu thập hình ảnh công khai, tôn trọng giấy phép, xem xét Điều khoản Dịch vụ và tham khảo ý kiến luật sư cho trường hợp sử dụng của bạn.

H: Tại sao các giá trị src tôi thu thập được lại trống hoặc là các biểu tượng nhỏ?
Do hình ảnh được tải chậm. Cuộn trang trước để trình tải đổi chỗ biểu tượng cho URL thật, và đọc currentSrc/data-src thay vì chỉ src.

H: Làm thế nào để tôi xử lý các bộ sưu tập có cuộn vô hạn?
Lặp lại bước cuộn cho đến khi document.body.scrollHeight ngừng tăng, sau đó thu thập — đó là tín hiệu không còn hình ảnh nào sẽ tải.

H: Tại sao các tải xuống của tôi trả về 403 mặc dù URL hoạt động trên trình duyệt?
CDN đang kiểm tra referer/cookies (bảo vệ hotlink). Tải xuống với fetch() trong trang để yêu cầu mang theo thông tin đăng nhập của phiên đã được hiển thị.

H: Làm thế nào để tôi có được phiên bản độ phân giải cao nhất?
Phân tích srcset thô và chọn ứng cử viên lớn nhất, thay vì currentSrc mà phản ánh cửa sổ nhìn hiện tại.

H: Tôi có cần một proxy không?
Đối với các trang hình ảnh công khai, thường là không — nhưng ghim proxyCountry giúp có một IP dân cư nhất quán mà các trang nặng hình ảnh và CDN của chúng xem như một khách truy cập bình thường.

H: Tôi có thể chạy điều này mà không cần đại lý AI không?
Có. Đó là Puppeteer đơn giản trên phiên Scrapeless — không cần đại lý.