Есть скрипт который берет изображение с другого сайта переделывает его в base66, и запихивает в localStorage. Для того чтоб, взять изображение с такого сайта как википедия достаточно указать атрибут crossOrigin="*" . Я так понимаю crossOrigin, это разрешение на использование контента этого сайта. А как разрешать доступ к картинкам для одного из своих сайтов. Что мне нужно поставить в крос орджин какую-то свою метку ?
Для наглядности привожу скрипт:
<img id="bannerImg" class="image" crossOrigin="*" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Proton-K-Zarya.jpg/800px-Proton-K-Zarya.jpg" />
<img id="tableBanner" class="image" crossOrigin="*" src="https://upload.wikimedia.org/wikipedia/commons/e/e8/Richard_of_Shrewsbury%2C_1._Duke_of_York.jpg?download" />
$(document).ready(function() {
var images = document.querySelectorAll('.image');
if (images.length > 0) {
// в Storage
var dataArray = [];
for (var i = 0, itemsLength = images.length; i < itemsLength; i++) {
dataArray.push({
img: getBase64Image(images[i]),
id: images[i].id || ''
});
}
localStorage.setItem("imagesData", JSON.stringify(dataArray));
//из Storage
var storageArray = JSON.parse(localStorage.getItem('imagesData'));
if (Array.isArray(storageArray)) {
storageArray.map(function(dataImage) {
var element = document.getElementById(dataImage.id);
if (element) {
element.src = "data:image/png;base64," + dataImage.img;
}
});
}
}
function getBase64Image(img) {
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
var dataURL = canvas.toDataURL("image/png");
return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}
});
P.S. доступ к изображением должен получить не другой сервер а клиентский скрипт...(браузер)
header
с параметромAccess-Control-Allow-Origin: *
wikipedia: cors