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

Amazon недавно анонсированная поддержка CORS

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

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

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

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

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

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

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

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

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

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

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

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

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

Для людей, которые не используют 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;

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

Чтобы изменить права доступа к корзине S3:

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

2) В списке сегментов откройте сегмент, свойства которого вы хотите просмотреть, и нажмите «добавить конфигурацию 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' на изображении, которое вы будете использовать на холсте.

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

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

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

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