Чтобы загрузить изображение по 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);