-1

Есть код который берет картинку кодирует в base64 потом кладет её в локальное хранилище потом достает и вcтраеват в DOM. Но проблема в том, что при загрузке картинки если заголовок crossOrigin не указывать то выбивает ошибку безопасности.

А ели указывать то все хорошо. Просто по идее когда запрос с браузера это не крос доменный запрос ? Почему тогда ошибка ? Указывать это не вариант потому, к серверу с которого беру картинки , я доступ не имею.

Вот код :

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,/, "");
}

var els = document.getElementsByClassName("tableBanner1");
var imgCnt = 0;

Array.prototype.forEach.call(els, function(bannerImage) {
  // Do stuff with the element
  console.log(bannerImage);
  if (bannerImage.width > 0) {
    imgData = getBase64Image(bannerImage);
    localStorage.setItem("imgData" + imgCnt, imgData);

    var dataImage = localStorage.getItem('imgData' + imgCnt);
    bannerImg = document.getElementById('tableBanner' + imgCnt);
    bannerImg.src = "data:image/png;base64," + dataImage;
    imgCnt++;
  }

});
<img class="tableBanner1" crossOrigin="*" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Proton-K-Zarya.jpg/800px-Proton-K-Zarya.jpg" />
<img class="tableBanner1" crossOrigin="*" src="https://upload.wikimedia.org/wikipedia/commons/9/9d/RichardWagner.jpg" />

<img class="tableBanner" id="tableBanner0" crossOrigin="*" src="" />
<img class="tableBanner" id="tableBanner1" crossOrigin="*" src="" />

Вот на фидле: http://jsfiddle.net/4ra8nhk4/25/

1 ответ 1

2

Потому что правила безопасности не позволяю вот так просто лазить по чужим серверам.

Способы:

  1. Делаешь на своём сервере хендлер, который получает картинку и пересылает её сайту. В таком варианте домен один и проблемы нет.

  2. Если это надо для каких-то своих целей только тебе (например, наковырять картинок), запускаешь хром с флагом --disable-web-security.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.