Загрузите изображение по URL-адресу и сохраните его как файл с помощью JavaScript.

Чтобы загрузить изображение по URL-адресу в JavaScript и сохранить его в виде файла, вы можете использовать несколько методов. Вот несколько подходов:

Метод 1: использование Fetch API и Blob

function downloadImage(url, filename) {
  fetch(url)
    .then(response => response.blob())
    .then(blob => {
      const a = document.createElement('a');
      const objectURL = URL.createObjectURL(blob);
      a.href = objectURL;
      a.download = filename;
      a.click();
      URL.revokeObjectURL(objectURL);
    });
}
// Usage example:
const imageUrl = 'https://example.com/image.jpg';
const fileName = 'image.jpg';
downloadImage(imageUrl, fileName);

Метод 2: использование XMLHttpRequest

function downloadImage(url, filename) {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.responseType = 'blob';
  xhr.onload = function () {
    if (xhr.status === 200) {
      const blob = xhr.response;
      const a = document.createElement('a');
      const objectURL = URL.createObjectURL(blob);
      a.href = objectURL;
      a.download = filename;
      a.click();
      URL.revokeObjectURL(objectURL);
    }
  };
  xhr.send();
}
// Usage example:
const imageUrl = 'https://example.com/image.jpg';
const fileName = 'image.jpg';
downloadImage(imageUrl, fileName);

Метод 3: использование HTMLCanvasElement

function downloadImage(url, filename) {
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');
  const img = new Image();
  img.crossOrigin = 'anonymous';
  img.onload = function () {
    canvas.width = img.width;
    canvas.height = img.height;
    context.drawImage(img, 0, 0);
    const dataURL = canvas.toDataURL('image/jpeg');
    const a = document.createElement('a');
    a.href = dataURL;
    a.download = filename;
    a.click();
  };
  img.src = url;
}
// Usage example:
const imageUrl = 'https://example.com/image.jpg';
const fileName = 'image.jpg';
downloadImage(imageUrl, fileName);