正文

掌握JavaScript下载URL图片及获取其大小技巧

/0 浏览量
0628

在Web开发中，经常需要处理图片的下载和获取大小等操作。JavaScript作为前端开发的重要工具，提供了多种方法来实现这些功能。下面，我将详细介绍如何使用JavaScript下载URL图片以及获取其大小。

1. 使用fetch API下载图片

fetch API是现代浏览器提供的一个用于网络请求的接口，它可以用来下载图片。以下是一个使用fetch API下载图片的基本示例：

function downloadImage(url) {
  fetch(url)
    .then(response => {
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      return response.blob();
    })
    .then(blob => {
      const url = window.URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.style.display = 'none';
      a.href = url;
      a.download = 'downloaded-image.jpg';
      document.body.appendChild(a);
      a.click();
      window.URL.revokeObjectURL(url);
    })
    .catch(error => {
      console.error('Download failed:', error);
    });
}

在这个例子中，我们首先使用fetch请求图片资源，然后将其转换为blob对象。接着，我们创建一个隐藏的<a>元素，设置其href属性为图片的URL，并设置download属性为下载的文件名。最后，我们通过触发click事件来下载图片。

2. 使用Image对象获取图片大小

要获取图片的大小，我们可以使用Image对象。以下是一个获取图片大小的示例：

function getImageSize(url) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = () => {
      resolve({ width: img.width, height: img.height });
    };
    img.onerror = () => {
      reject(new Error('Failed to load image'));
    };
    img.src = url;
  });
}

// 使用示例
getImageSize('https://example.com/image.jpg')
  .then(size => {
    console.log(`Image size: ${size.width}x${size.height}`);
  })
  .catch(error => {
    console.error('Error:', error);
  });

在这个例子中，我们创建了一个新的Image对象，并设置了其onload和onerror事件处理函数。当图片加载成功时，我们通过img.width和img.height获取图片的宽度和高度，并将其作为结果返回。如果图片加载失败，我们抛出一个错误。

通过以上两个技巧，你可以轻松地使用JavaScript下载URL图片以及获取其大小。在实际应用中，你可以根据具体需求对这些方法进行扩展和优化。

-- 展开阅读全文 --