1

Есть скрипт который берет изображение с другого сайта переделывает его в 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. доступ к изображением должен получить не другой сервер а клиентский скрипт...(браузер)

3
  • А что бы отправить, надо прикреплять дополнительный header с параметром Access-Control-Allow-Origin: * wikipedia: cors
    – Alex Krass
    21 сен 2015 в 8:22
  • @Alex Krass, а если я укажу Allow-Origin: startLoad , и укажу на клиенте crossOrigin="startLoad ", то доступ к картинкам получит , только мой клиентский скрипт . Правильно ли я понимаю ? 21 сен 2015 в 8:31
  • Указывать вы должны домен, а не просто строчку любую. По факту только сервер определяет домены, которые могут получить доступ к содержимому. От клиента строка нужна только для того, что бы попросить этот доступ у браузера, если разрешение от сервера есть.
    – Alex Krass
    21 сен 2015 в 9:16

1 ответ 1

1

Если сервер www.b.com хочет разрешить получение данных с www.a.com то в ответе сервера будет присутствовать строчка:

Access-Control-Allow-Origin: http://www.a.com

Для нескольких доментов их можно указать через пробел:

 Access-Control-Allow-Origin: http://www.a.com http://www.b.com http://www.c.com
1
  • а если запрос на получение изображения делает не сервер, а клиентский скрипт(браузер) ? 21 сен 2015 в 8:50

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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