js抓取页面图片

// 获取页面上所有的img标签
const images = document.querySelectorAll('img');

// 遍历并输出图片的src属性
images.forEach(img => {
  console.log(img.src);
});

// 创建一个新的Image对象
const img = new Image();

// 设置图片的src属性
img.src = 'https://example.com/image.jpg';

// 当图片加载完成后执行回调函数
img.onload = () => {
  // 创建一个canvas元素
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');

  // 设置canvas的尺寸与图片相同
  canvas.width = img.width;
  canvas.height = img.height;

  // 将图片绘制到canvas上
  ctx.drawImage(img, 0, 0);

  // 将canvas转换为DataURL（Base64编码的图片）
  const dataURL = canvas.toDataURL('image/png');

  // 输出DataURL
  console.log(dataURL);

  // 如果需要将图片发送到服务器，可以使用fetch或XMLHttpRequest
  fetch('/save-image', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ image: dataURL })
  }).then(response => response.json())
    .then(data => console.log('Success:', data))
    .catch((error) => console.error('Error:', error));
};

img.onerror = () => {
  console.error('Image failed to load');
};