Я не могу загрузить изображения размером более 1 МБ.Я получаю сообщение об ошибке:
Доступ к изображению в https://wallpaperaccess.com/full/672999.jpg
из источника http://localhost:8023
был заблокирован политикой CORS: на запрошенном ресурсе отсутствует заголовок Access-Control-Allow-Origin
.
Но когда я загружаю изображение меньшего размера, например КБ, загружаются все изображения.Мой второй и третий URL-адрес изображения загружается, но не первый.Вот мой код:
var upics = [
"https://images.unsplash.com/photo-1511739001486-6bfe10ce785f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80",
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ0cq-7TkAONUjnDKz2AkEgiFRG6E0Dmrl43lOuj_nQCOrnQG8",
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ0cq-7TkAONUjnDKz2AkEgiFRG6E0Dmrl43lOuj_nQCOrnQG8"
];
function download(item) {
var fileName = item.split(/(\\|\/)/g).pop();
var image = new Image(544, 184);
image.crossOrigin = "anonymous";
image.src = item;
image.onload = function() {
// use canvas to load image
var canvas = document.createElement('canvas');
canvas.width = this.naturalWidth;
canvas.height = this.naturalHeight;
canvas.getContext('2d').drawImage(this, 0, 0);
// grab the blob url
var blob;
if (image.src.indexOf(".jpg") > -1) {
blob = canvas.toDataURL("image/jpeg");
} else if (image.src.indexOf(".png") > -1) {
blob = canvas.toDataURL("image/png");
} else if (image.src.indexOf(".gif") > -1) {
blob = canvas.toDataURL("image/gif");
} else {
blob = canvas.toDataURL("image/png");
}
// create link, set href to blob
var a = document.createElement('a');
a.title = fileName;
a.href = blob;
a.style.display = 'none';
a.setAttribute("download", fileName);
a.setAttribute("target", "_blank");
document.body.appendChild(a);
// click item
a.click();
}
}
function downloadAll(item) {
for (var i in upics) {
download(upics[i]);
}
}
<button onclick="downloadAll()">download</button>