HTML5 Canvas getImageData и та же политика происхождения

Question

У меня есть сайт, работающий по адресу pixie.strd6.com, и изображения, размещенные через Amazon S3 с CNAME для images.pixie.strd6.com.

Я хотел бы иметь возможность рисовать эти изображения наHTML5 canvas и вызов метода getImageData, но он выдает Error: SECURITY_ERR: DOM Exception 18

Я попытался установить window.domain = "pixie.strd6.com", но это не имеет никакого эффекта.

Кроме того, $.get("http://dev.pixie.strd6.com/sprites/8516/thumb.png?1293830982", function(data) {console.log(data)}) также вызывает ошибку: XMLHttpRequest cannot load <a href="http://dev.pixie.strd6.com/sprites/8516/thumb.png?1293830982">http://dev.pixie.strd6.com/sprites/8516/thumb.png?1293830982</a>. Origin <a href="http://pixie.strd6.com">http://pixie.strd6.com</a> is not allowed by Access-Control-Allow-Origin.

В идеале HTML5 canvas не будет блокировать вызов getImageData из поддоменов.Я смотрел на установку заголовка Access-Control-Allow-Origin в S3, но не удалось.

Любая помощь или обходные пути приветствуются.

Answer 1

Amazon недавно объявила о поддержке CORS

Мы рады объявить о поддержке перекрестного общего доступа к ресурсам (CORS) в Amazon S3. Теперь вы можете легко создавать веб-приложения, использующие JavaScript и HTML5, для взаимодействия с ресурсами в Amazon S3, что позволяет реализовывать перетаскивание HTML5 в Amazon S3, показывать процесс загрузки или обновлять контент. До сих пор вам нужно было запустить собственный прокси-сервер между вашим веб-приложением и Amazon S3 для поддержки этих возможностей.

Как включить CORS

Чтобы сконфигурировать ваше ведро для разрешения запросов между источниками, вы создаете конфигурацию CORS, XML-документ с правилами, которые определяют источники, которым вы разрешите получить доступ к вашему ведру, операции (методы HTTP) будут поддерживать для каждого источника, и другая специфическая для операции информация. Вы можете добавить до 100 правил в конфигурацию. Вы добавляете XML-документ как подресурс cors в корзину.

Answer 2

Одним из возможных решений является использование nginx в качестве прокси. Вот как настроить URL-адреса, идущие на http://pixie.strd6.com/s3/ для передачи на S3, но браузер все еще может полагать, что это не кросс-домен.

location /s3/ {
  proxy_pass http://images.pixie.strd6.com/;
}

Answer 3

Если вы используете PHP, вы можете сделать что-то вроде:

    function fileExists($path){
        return (@fopen($path,"r")==true);
    }
    $ext = explode('.','https://cgdev-originals.s3.amazonaws.com/fp9emn.jpg');
    if(fileExists('https://cgdev-originals.s3.amazonaws.com/fp9emn.jpg')){
        $contents = file_get_contents('https://cgdev-originals.s3.amazonaws.com/fp9emn.jpg');
        header('Content-type: image/'.end($ext));
        echo $contents;
    }

И доступ к изображению с помощью этого php-файла, например, если файл называется generateImage.php, вы можете сделать <img src="http://GENERATEPHPLOCATION/generateImage.php"/>, а внешний URL-адрес изображения может быть параметром get для файла

Answer 4

Чтобы изменить разрешения S3 Bucket:

1) Войдите в консоль управления AWS и откройте консоль Amazon S3 по адресу https://console.aws.amazon.com/s3/

2) В списке Buckets откройтесписок свойств, которые вы хотите просмотреть, и нажмите «добавить конфигурацию CORS»

3) Напишите правила, которые вы хотите добавить между тегами <CORSConfiguration>

<CORSConfiguration>
  <CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
  </CORSRule>
</CORSConfiguration>

Подробнее о правилах можно узнать по адресу: http://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html

4) Укажите crossorigin = 'anonymous' на изображении, которое вы будете использовать на холсте

Answer 5

Для людей, которые не используют S3, можно попытаться создать прокси-изображение, которое кодирует файл изображения и обернуть его в объект JSON.

Затем вы можете использовать JSONP, который поддерживает междоменный домен, для извлечения объекта JSON и назначения данных изображения для img.src.

Я написал пример кода прокси-сервера изображений с Google App Engine,https://github.com/flyakite/gae-image-proxy

Объект JSON возвращается в следующем формате:

{ 
  'height': 50, 
  'width' : 50, 
  'data'  : 'data:image/jpeg;base64,QWRarjgk4546asd...QWAsdf'
} 

«Данные» - это данные изображения в формате base64.Присвойте его изображению.

img.src = result.data;

Изображение теперь "чистое" для вашего холста.

Answer 6

В прошлом Amazon S3 не разрешал вам изменять или добавлять HTTP-заголовки access-control-allow-origin и access-control-allow-credentials, поэтому, возможно, было бы лучше переключиться на другой сервис, такой как Rackspace Cloud Файлы или какой-либо другой сервис, который делает.

Добавьте или измените заголовки HTTP следующим образом:

access-control-allow-origin: [your site]
access-control-allow-credentials: true

См. http://www.w3.org/TR/cors/#use-cases для получения дополнительной информации.

Использование службы, позволяющей изменять заголовки HTTP, полностью решает ту же проблему происхождения.

Answer 7

Недавно я наткнулся на $.getImageData Макса Новаковича. На этой странице есть несколько полезных демонстраций получения и обработки фотографий Flickr, а также несколько примеров кода.

Позволяет получить изображение в манипулятивной форме JavaScript с произвольного сайта. Это работает, добавив скрипт на страницу. Затем скрипт запрашивает изображение с сервера Google App Engine. Сервер извлекает запрошенное изображение и передает его в сценарий, преобразованный в base64. Когда скрипт получает base64, он передает данные в обратный вызов, который затем может нарисовать их на холсте и начать с ними связываться.

Answer 8

Просто столкнулся с той же проблемой.Я узнал о CORS, который может быть полезен.

http://html5 -demos.appspot.com / static / html5-whats-new / template / index.html # 14

Это не сработало для меня, так как я пытаюсь манипулировать изображением из Flickr.Итак, я все еще ищу решение.

Answer 9

Такое поведение является второстепенным.Согласно спецификации HTML5, как только вы рисуете перекрестное происхождение изображения на холсте, оно становится грязным, и вы больше не можете читать пиксели.При сопоставлении с исходным кодом сравнивается схема, полностью определенный хост и в браузерах, отличных от IE, порт.