IE10 и совместное использование ресурсов (CORS) с изображением/холстом

У меня создалось впечатление, что Internet Explorer 10 полностью поддерживает CORS, но теперь я не уверен.

У нас есть приложение JS/HTML5, которое использует несколько доменов и считывает данные изображения. Мы загружаем изображения в JS из другого домена, imageDraw() с изображением на наш холст, а затем с помощью getImageData на холсте. (Мы не используем междоменные XMLHttpRequests). Для этого нам нужно было установить заголовки ответов на сервере, обслуживающие изображения:

access-control-allow-origin: *
access-control-allow-credentials: true

И установите это на объекте изображения в JS перед загрузкой:

image.crossOrigin = 'Anonymous'; //Also tried lowercase

Это отлично работает для всех новых браузеров, кроме IE10, который бросает ошибки безопасности при попытке прочитать данные.

SCRIPT5022: SecurityError

Есть ли что-то еще, что нужно сделать для IE10 для обработки этих изображений кросс-домена, поскольку они не загрязняют?

UPDATE:

Я заметил этот ответ по предыдущему вопросу. Интересно этот JSFiddle также не работает для IE10 - может ли кто-нибудь подтвердить, что это не работает в их IE10?

Ответ 1

К сожалению, IE10 по-прежнему остается единственным популярным браузером, который не поддерживает CORS для изображения, нарисованного на Canvas, даже когда заголовки CORS правильно установлены. Но есть обходное решение для этого через XMLHttpRequest:

var xhr = new XMLHttpRequest();
xhr.onload = function () {
    var url = URL.createObjectURL(this.response), img = new Image();
    img.onload = function () {
        // here you can use img for drawing to canvas and handling
        // ...
        // don't forget to free memory up when you're done (you can do this as soon as image is drawn to canvas)
        URL.revokeObjectURL(url);
    };
    img.src = url;
};
xhr.open('GET', url, true);
xhr.responseType = 'blob';
xhr.send();

Ответ 2

Подтверждено: IE10 не поддерживает изображения CORS в холсте HTML 5.. Ответ RReverser для обходного пути.

Изменить

Извините, я раньше не рассматривал изображения CORS и думал, что этот вопрос касается запроса AJAX.

В соответствии с Mozilla Developer Network вам нужно установить image.crossOrigin в anonymous или use-credentials. Кроме того, согласно этой странице сегодня, эти атрибуты не поддерживаются в IE, Safari или Opera. Этот тест был сделан для того, чтобы продемонстрировать, что IE9 его не поддерживает, и похоже, что тот же тест все еще не работает в IE10, поэтому даже если Safari и Opera имеют добавлена поддержка, поскольку была написана статья MDN, вполне возможно, что IE10 по-прежнему не имеет поддержки.

Единственный совет, который я могу вам дать, это то, что в общем случае allow-credentials несовместимо с подстановочным знаком allow-origin. Либо отпустите учетные данные разрешения, либо выполните эхо-запрос Origin в разрешении-источнике.

Ниже приведен список вызовов AJAX, а не изображений и видеоизображений

Ранние версии IE10, как известно, имеют ошибки AJAX,

поэтому это может быть другая ошибка браузера. Опять же, CORS обманчиво сложно, чтобы получить право. Я рекомендую следующие шаги для отладки проблем CORS.

Направьте браузер на http://test-cors.appspot.com/#technical, чтобы получить отчет о совместимости. Если что-то не получается, у вас есть ошибка или отсутствие поддержки для CORS в браузере.
Если все прошло, используйте заголовки CORS, которые тест отправляет в качестве отправной точки, чтобы получить запрос CORS. Затем измените один заголовок за раз и повторите проверку до тех пор, пока вы не получите заголовки так, как вы хотите для своего приложения, или вы столкнулись с неудачей, которую вы не можете объяснить или обойти.
Если необходимо, задайте вопрос об этом крошечном изменении, которое нарушает запрос CORS, публикуя как "предыдущий", так и "после". Это всегда помогает, если вы можете включить runnable пример.

Полный код тестового клиента и сервера CORS (Python script для Google App Engine) доступен по адресу https://github.com/rapportive-oss/cors-test для начните.